'use client';

import { useQuery } from '@tanstack/react-query';
import { getBooking } from '@/lib/api';
import { Link } from '@/i18n/navigation';
import { useParams } from 'next/navigation';
import { useTranslations, useLocale } from 'next-intl';

export default function BookingDetailPage() {
  const t = useTranslations('dashboard.bookingDetail');
  const locale = useLocale();
  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
  const params = useParams();
  const bookingId = params.id as string;

  const { data: booking, isLoading } = useQuery({
    queryKey: ['booking', bookingId],
    queryFn: () => getBooking(bookingId),
    enabled: !!bookingId,
  });

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      draft: 'bg-gray-100 text-gray-800',
      pending: 'bg-yellow-100 text-yellow-800',
      confirmed: 'bg-green-100 text-green-800',
      in_transit: 'bg-blue-100 text-blue-800',
      delivered: 'bg-purple-100 text-purple-800',
      cancelled: 'bg-red-100 text-red-800',
    };
    return colors[status] || 'bg-gray-100 text-gray-800';
  };

  const getStatusLabel = (status: string) => {
    const key = `status.${status}`;
    try {
      return t(key as any);
    } catch {
      return status;
    }
  };

  const downloadPDF = async () => {
    try {
      alert(t('pdfNotImplemented'));
      console.log('Download PDF for booking:', bookingId);
    } catch (error) {
      console.error('Failed to download PDF:', error);
    }
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  if (!booking) {
    return (
      <div className="text-center py-12">
        <h2 className="text-2xl font-semibold text-gray-900">{t('notFound')}</h2>
        <Link
          href="/dashboard/bookings"
          className="mt-4 inline-block text-blue-600 hover:text-blue-700"
        >
          {t('back')}
        </Link>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Link
            href="/dashboard/bookings"
            className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
          >
            {t('back')}
          </Link>
          <div className="flex items-center space-x-4">
            <h1 className="text-2xl font-bold text-gray-900">{booking.bookingNumber}</h1>
            <span
              className={`px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full ${getStatusColor(
                booking.status
              )}`}
            >
              {getStatusLabel(booking.status)}
            </span>
          </div>
          <p className="text-sm text-gray-500 mt-1">
            {t('createdOn', { date: new Date(booking.createdAt).toLocaleDateString(dateLocale) })}
          </p>
        </div>
        <div className="flex space-x-3">
          <button
            onClick={downloadPDF}
            className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
          >
            <svg className="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </svg>
            {t('downloadPdf')}
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('cargo.title')}</h2>
            <dl className="grid grid-cols-1 gap-4">
              <div>
                <dt className="text-sm font-medium text-gray-500">{t('cargo.description')}</dt>
                <dd className="mt-1 text-sm text-gray-900">{booking.cargoDescription}</dd>
              </div>
              {booking.specialInstructions && (
                <div>
                  <dt className="text-sm font-medium text-gray-500">
                    {t('cargo.specialInstructions')}
                  </dt>
                  <dd className="mt-1 text-sm text-gray-900">{booking.specialInstructions}</dd>
                </div>
              )}
            </dl>
          </div>

          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">
              {t('containers.title', { count: booking.containers?.length || 0 })}
            </h2>
            <div className="space-y-3">
              {booking.containers?.map((container, index) => (
                <div key={container.id || index} className="border rounded-lg p-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-sm font-medium text-gray-500">{t('containers.type')}</p>
                      <p className="text-sm text-gray-900">{container.type}</p>
                    </div>
                    {container.containerNumber && (
                      <div>
                        <p className="text-sm font-medium text-gray-500">
                          {t('containers.number')}
                        </p>
                        <p className="text-sm text-gray-900">{container.containerNumber}</p>
                      </div>
                    )}
                    {container.sealNumber && (
                      <div>
                        <p className="text-sm font-medium text-gray-500">{t('containers.seal')}</p>
                        <p className="text-sm text-gray-900">{container.sealNumber}</p>
                      </div>
                    )}
                    {container.vgm && (
                      <div>
                        <p className="text-sm font-medium text-gray-500">{t('containers.vgm')}</p>
                        <p className="text-sm text-gray-900">{container.vgm}</p>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('shipper.title')}</h2>
              <dl className="space-y-2">
                <div>
                  <dt className="text-sm font-medium text-gray-500">{t('shipper.name')}</dt>
                  <dd className="text-sm text-gray-900">{booking.shipper.name}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">{t('shipper.contact')}</dt>
                  <dd className="text-sm text-gray-900">{booking.shipper.contactName}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">{t('shipper.email')}</dt>
                  <dd className="text-sm text-gray-900">{booking.shipper.contactEmail}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">{t('shipper.phone')}</dt>
                  <dd className="text-sm text-gray-900">{booking.shipper.contactPhone}</dd>
                </div>
              </dl>
            </div>

            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('consignee.title')}</h2>
              <dl className="space-y-2">
                <div>
                  <dt className="text-sm font-medium text-gray-500">{t('consignee.name')}</dt>
                  <dd className="text-sm text-gray-900">{booking.consignee.name}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">{t('consignee.contact')}</dt>
                  <dd className="text-sm text-gray-900">{booking.consignee.contactName}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">{t('consignee.email')}</dt>
                  <dd className="text-sm text-gray-900">{booking.consignee.contactEmail}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-gray-500">{t('consignee.phone')}</dt>
                  <dd className="text-sm text-gray-900">{booking.consignee.contactPhone}</dd>
                </div>
              </dl>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('timeline.title')}</h2>
            <div className="flow-root">
              <ul className="-mb-8">
                <li>
                  <div className="relative pb-8">
                    <span
                      className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                      aria-hidden="true"
                    ></span>
                    <div className="relative flex space-x-3">
                      <div>
                        <span className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
                          <svg
                            className="h-5 w-5 text-white"
                            fill="currentColor"
                            viewBox="0 0 20 20"
                          >
                            <path
                              fillRule="evenodd"
                              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                              clipRule="evenodd"
                            />
                          </svg>
                        </span>
                      </div>
                      <div className="min-w-0 flex-1 pt-1.5">
                        <div>
                          <p className="text-sm text-gray-900 font-medium">
                            {t('timeline.created')}
                          </p>
                          <p className="text-sm text-gray-500">
                            {new Date(booking.createdAt).toLocaleString(dateLocale)}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('info.title')}</h2>
            <dl className="space-y-3">
              <div>
                <dt className="text-sm font-medium text-gray-500">{t('info.bookingId')}</dt>
                <dd className="mt-1 text-sm text-gray-900">{booking.id}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-gray-500">{t('info.lastUpdated')}</dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {new Date(booking.updatedAt).toLocaleString(dateLocale)}
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </div>
  );
}