'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, Calendar, Users, Clock, Phone, Mail, Bot, Edit2, ChevronRight, MessageSquare } from 'lucide-react';
import Icon from '@client/components/ui/AppIcon';
import { usePageHeader } from '@client/contexts/PageHeaderContext';
import { useLanguage } from '@client/contexts/LanguageContext';


const bookingStatuses = ['pending', 'confirmed', 'seated', 'completed', 'cancelled'];

const bookingData = {
  id: 'BKG-4421',
  status: 'confirmed',
  customer: { name: 'David Park', email: 'david@email.com', phone: '+1 555-0104', tier: 'Gold' },
  table: 'Table 8 (Window)',
  partySize: 4,
  date: 'Saturday, Mar 15, 2026',
  time: '7:30 PM',
  duration: '2 hours',
  specialRequests: 'Anniversary dinner — please arrange a small cake if possible. Prefer quiet corner.',
  branch: 'The Rustic Fork — Downtown',
  channel: 'AI Voice',
  bookedAt: 'Mar 12, 2026 · 2:15 PM',
  aiConversation: [
    { sender: 'customer', text: 'I\'d like to book a table for 4 people on Saturday evening.' },
    { sender: 'ai', text: 'I\'d be happy to help! We have availability at 7:00 PM, 7:30 PM, or 8:00 PM on Saturday. Which time works best?' },
    { sender: 'customer', text: '7:30 PM please. It\'s our anniversary so something special would be nice.' },
    { sender: 'ai', text: 'How lovely! I\'ve booked Table 8 (window view) for 4 at 7:30 PM on Saturday. I\'ve added a note about your anniversary. Is there anything else?' },
  ],
};

export default function BookingDetailPage() {
  const { t } = useLanguage();
  usePageHeader(`${t('tableBooking.booking', 'Booking')} ${bookingData?.id}`, t('tableBooking.fullBookingDetailsAndCustomerInfo', "Full booking details and customer information"));
  const [status, setStatus] = useState(bookingData?.status);

  return (
    <>
      <div className="flex items-center gap-3 mb-6">
        <Link href="/table-booking-management" className="btn-ghost p-1.5"><ArrowLeft size={16} /></Link>
        <div className="flex items-center gap-2">
          <span className="font-bold text-lg" style={{ color: 'hsl(var(--foreground))' }}>{bookingData?.id}</span>
          <span className="badge badge-success capitalize">{t(`tableBooking.status.${status}`, status)}</span>
        </div>
        <div className="ml-auto flex gap-2">
          <button className="btn-secondary"><Edit2 size={14} /> {t('tableBooking.editBooking', 'Edit Booking')}</button>
        </div>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div className="lg:col-span-2 space-y-5">
          {/* Booking summary */}
          <div className="card p-5">
            <h3 className="font-semibold mb-4" style={{ color: 'hsl(var(--foreground))' }}>{t('tableBooking.bookingDetails', 'Booking Details')}</h3>
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
              {[
                { icon: Calendar, label: t('common.date', 'Date'), value: bookingData?.date },
                { icon: Clock, label: t('common.time', 'Time'), value: bookingData?.time },
                { icon: Users, label: t('tableBooking.partySize', 'Party Size'), value: `${bookingData?.partySize} ${t('tableBooking.guests', 'guests')}` },
                { icon: Clock, label: t('tableBooking.duration', 'Duration'), value: bookingData?.duration },
                { icon: MessageSquare, label: t('tableBooking.table', 'Table'), value: bookingData?.table },
                { icon: Phone, label: t('tableBooking.channel', 'Channel'), value: bookingData?.channel },
              ]?.map(item => {
                const Icon = item?.icon;
                return (
                  <div key={item?.label} className="p-3 rounded-xl" style={{ backgroundColor: 'hsl(var(--muted))' }}>
                    <div className="flex items-center gap-2 mb-1">
                      <Icon size={13} style={{ color: 'hsl(var(--primary))' }} />
                      <span className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>{item?.label}</span>
                    </div>
                    <p className="font-semibold text-sm" style={{ color: 'hsl(var(--foreground))' }}>{item?.value}</p>
                  </div>
                );
              })}
            </div>
            {bookingData?.specialRequests && (
              <div className="mt-4 p-3 rounded-lg" style={{ backgroundColor: 'hsl(var(--info-bg))', border: '1px solid hsl(var(--info-border))' }}>
                <p className="text-xs font-semibold mb-0.5" style={{ color: 'hsl(var(--info))' }}>{t('tableBooking.specialRequests', 'Special Requests')}</p>
                <p className="text-xs" style={{ color: 'hsl(var(--foreground))' }}>{bookingData?.specialRequests}</p>
              </div>
            )}
          </div>

          {/* Status actions */}
          <div className="card p-5">
            <h3 className="font-semibold mb-3" style={{ color: 'hsl(var(--foreground))' }}>{t('tableBooking.updateStatus', 'Update Status')}</h3>
            <div className="flex gap-2 flex-wrap">
              {bookingStatuses?.map(s => (
                <button
                  key={s}
                  onClick={() => setStatus(s)}
                  className={`text-xs px-3 py-1.5 rounded-lg border capitalize transition-all ${status === s ? 'btn-primary' : 'btn-secondary'}`}
                >
                  {t(`tableBooking.status.${s}`, s)}
                </button>
              ))}
            </div>
          </div>

          {/* AI Conversation */}
          <div className="card p-5">
            <div className="flex items-center gap-2 mb-4">
              <Bot size={16} style={{ color: 'hsl(var(--info))' }} />
              <h3 className="font-semibold" style={{ color: 'hsl(var(--foreground))' }}>{t('conversations.aiConversation', 'AI Conversation')}</h3>
            </div>
            <div className="space-y-3">
              {bookingData?.aiConversation?.map((msg, idx) => (
                <div key={idx} className={`flex gap-3 ${msg?.sender === 'customer' ? '' : 'flex-row-reverse'}`}>
                  <div className="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0"
                    style={{ background: msg?.sender === 'customer' ? 'linear-gradient(135deg, hsl(var(--primary)), hsl(22, 89%, 36%))' : 'linear-gradient(135deg, hsl(var(--info)), hsl(210, 100%, 30%))' }}>
                    {msg?.sender === 'customer' ? 'D' : <Bot size={10} />}
                  </div>
                  <div className="max-w-[75%] px-3 py-2 rounded-xl text-xs"
                    style={{ backgroundColor: msg?.sender === 'customer' ? 'hsl(var(--muted))' : 'hsl(var(--info-bg))', color: 'hsl(var(--foreground))' }}>
                    {msg?.text}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right: Customer */}
        <div className="space-y-5">
          <div className="card p-5">
            <h3 className="font-semibold mb-4" style={{ color: 'hsl(var(--foreground))' }}>{t('customers.customer', 'Customer')}</h3>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold" style={{ background: 'linear-gradient(135deg, hsl(var(--primary)), hsl(22, 89%, 36%))' }}>DP</div>
              <div>
                <p className="font-semibold text-sm" style={{ color: 'hsl(var(--foreground))' }}>{bookingData?.customer?.name}</p>
                <span className="badge badge-warning text-xs">{t(`customers.tier.${bookingData?.customer?.tier.toLowerCase()}`, `${bookingData?.customer?.tier} Member`)}</span>
              </div>
            </div>
            <div className="space-y-2 text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>
              <div className="flex items-center gap-2"><Phone size={12} /> {bookingData?.customer?.phone}</div>
              <div className="flex items-center gap-2"><Mail size={12} /> {bookingData?.customer?.email}</div>
            </div>
            <Link href="/customers/4" className="btn-secondary w-full justify-center mt-3 text-xs py-1.5">
              {t('customers.viewFullProfile', 'View Full Profile')} <ChevronRight size={12} />
            </Link>
          </div>

          <div className="card p-5">
            <h3 className="font-semibold mb-3" style={{ color: 'hsl(var(--foreground))' }}>{t('tableBooking.bookingInfo', 'Booking Info')}</h3>
            <div className="space-y-2 text-xs">
              {[
                { label: t('tableBooking.bookingId', 'Booking ID'), value: bookingData?.id },
                { label: t('tableBooking.bookedAt', 'Booked'), value: bookingData?.bookedAt },
                { label: t('branchManagement.branch', 'Branch'), value: 'Downtown' },
              ]?.map(item => (
                <div key={item?.label} className="flex justify-between">
                  <span style={{ color: 'hsl(var(--muted-foreground))' }}>{item?.label}</span>
                  <span className="font-medium" style={{ color: 'hsl(var(--foreground))' }}>{item?.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
