'use client';

import { useEffect, useState, useCallback } from 'react';
import { useSearchParams } from 'next/navigation';
import { useRouter } from '@/i18n/navigation';
import { useTranslations, useLocale } from 'next-intl';
import { searchCsvRatesWithOffers } from '@/lib/api/rates';
import type { CsvRateSearchResult } from '@/types/rates';
import { Search, Lightbulb, DollarSign, Scale, Zap, Trophy, XCircle, AlertTriangle } from 'lucide-react';

interface BestOptions {
  eco: CsvRateSearchResult;
  standard: CsvRateSearchResult;
  fast: CsvRateSearchResult;
}

export default function SearchResultsPage() {
  const t = useTranslations('dashboard.rateSearch.results');
  const locale = useLocale();
  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
  const router = useRouter();
  const searchParams = useSearchParams();
  const [results, setResults] = useState<CsvRateSearchResult[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const origin = searchParams.get('origin') || '';
  const destination = searchParams.get('destination') || '';
  const volumeCBM = parseFloat(searchParams.get('volumeCBM') || '0');
  const weightKG = parseFloat(searchParams.get('weightKG') || '0');
  const palletCount = parseInt(searchParams.get('palletCount') || '0');

  const performSearch = useCallback(async () => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await searchCsvRatesWithOffers({
        origin,
        destination,
        volumeCBM,
        weightKG,
        palletCount,
        hasDangerousGoods: searchParams.get('hasDangerousGoods') === 'true',
        requiresSpecialHandling: searchParams.get('requiresSpecialHandling') === 'true',
        requiresTailgate: searchParams.get('requiresTailgate') === 'true',
        requiresStraps: searchParams.get('requiresStraps') === 'true',
        requiresThermalCover: searchParams.get('requiresThermalCover') === 'true',
        hasRegulatedProducts: searchParams.get('hasRegulatedProducts') === 'true',
        requiresAppointment: searchParams.get('requiresAppointment') === 'true',
      });

      setResults(response.results);
    } catch (err) {
      console.error('Search error:', err);
      setError(err instanceof Error ? err.message : t('errorGeneric'));
    } finally {
      setIsLoading(false);
    }
  }, [origin, destination, volumeCBM, weightKG, palletCount, searchParams, t]);

  useEffect(() => {
    if (!origin || !destination || !volumeCBM || !weightKG) {
      router.push('/dashboard/search-advanced');
      return;
    }

    performSearch();
  }, [origin, destination, volumeCBM, weightKG, performSearch, router]);

  const getBestOptions = (): BestOptions | null => {
    if (results.length === 0) return null;

    const economic = results.find(r => r.serviceLevel === 'ECONOMIC');
    const standard = results.find(r => r.serviceLevel === 'STANDARD');
    const rapid = results.find(r => r.serviceLevel === 'RAPID');

    if (economic && standard && rapid) {
      return {
        eco: economic,
        standard: standard,
        fast: rapid,
      };
    }

    const sorted = [...results].sort((a, b) => a.priceEUR - b.priceEUR);
    const fastest = [...results].sort((a, b) => a.transitDays - b.transitDays);

    return {
      eco: sorted[0],
      standard: sorted[Math.floor(sorted.length / 2)] || sorted[0],
      fast: fastest[0],
    };
  };

  const bestOptions = getBestOptions();

  const formatPrice = (price: number) => {
    return new Intl.NumberFormat(dateLocale, {
      style: 'currency',
      currency: 'EUR',
    }).format(price);
  };

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center">
            <div className="inline-block animate-spin rounded-full h-16 w-16 border-b-4 border-blue-600 mb-4"></div>
            <p className="text-xl text-gray-700 font-medium">{t('loadingTitle')}</p>
            <p className="text-gray-500 mt-2">
              {origin} → {destination}
            </p>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="bg-red-50 border-2 border-red-200 rounded-lg p-8 text-center">
            <div className="mb-4 flex justify-center"><XCircle className="h-16 w-16 text-red-500" /></div>
            <h3 className="text-xl font-bold text-red-900 mb-2">{t('errorTitle')}</h3>
            <p className="text-red-700 mb-4">{error}</p>
            <button
              onClick={() => router.push('/dashboard/search-advanced')}
              className="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
            >
              {t('backToSearch')}
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (results.length === 0) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4">
        <div className="max-w-7xl mx-auto">
          <button
            onClick={() => router.back()}
            className="mb-6 flex items-center text-blue-600 hover:text-blue-800 font-medium"
          >
            {t('backToSearch')}
          </button>

          <div className="bg-yellow-50 border-2 border-yellow-200 rounded-lg p-8 text-center">
            <div className="mb-4 flex justify-center"><Search className="h-16 w-16 text-yellow-500" /></div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">{t('noResultsTitle')}</h3>
            <p className="text-gray-600 mb-4">
              {t('noResultsMessage', { origin, destination })}
            </p>
            <div className="bg-white border border-yellow-300 rounded-lg p-4 text-left max-w-2xl mx-auto mb-6">
              <h4 className="font-semibold text-gray-900 mb-2 flex items-center">
                <Lightbulb className="h-5 w-5 mr-2 text-yellow-500" /> {t('suggestions')}
              </h4>
              <ul className="text-sm text-gray-700 space-y-2">
                <li>{t('suggestionPorts')}</li>
                <li>{t('suggestionVolume')}</li>
                <li>{t('suggestionWeight')}</li>
              </ul>
            </div>
            <button
              onClick={() => router.back()}
              className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              {t('modifySearch')}
            </button>
          </div>
        </div>
      </div>
    );
  }

  const optionCards = [
    {
      type: t('options.economic'),
      option: bestOptions?.eco,
      colors: {
        border: 'border-green-200',
        bg: 'bg-green-50',
        text: 'text-green-800',
        button: 'bg-green-600 hover:bg-green-700',
      },
      icon: <DollarSign className="h-10 w-10 text-green-600" />,
      badge: t('options.badgeCheapest'),
    },
    {
      type: t('options.standard'),
      option: bestOptions?.standard,
      colors: {
        border: 'border-blue-200',
        bg: 'bg-blue-50',
        text: 'text-blue-800',
        button: 'bg-blue-600 hover:bg-blue-700',
      },
      icon: <Scale className="h-10 w-10 text-blue-600" />,
      badge: t('options.badgeBalanced'),
    },
    {
      type: t('options.fast'),
      option: bestOptions?.fast,
      colors: {
        border: 'border-purple-200',
        bg: 'bg-purple-50',
        text: 'text-purple-800',
        button: 'bg-purple-600 hover:bg-purple-700',
      },
      icon: <Zap className="h-10 w-10 text-purple-600" />,
      badge: t('options.badgeFastest'),
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <button
            onClick={() => router.back()}
            className="mb-4 flex items-center text-blue-600 hover:text-blue-800 font-medium"
          >
            {t('backToSearch')}
          </button>

          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-3xl font-bold text-gray-900 mb-2">{t('resultsTitle')}</h1>
                <p className="text-gray-600">
                  <span className="font-semibold">{origin}</span> → <span className="font-semibold">{destination}</span>{' '}
                  •{' '}
                  {palletCount > 0
                    ? t('summaryWithPallets', { volume: volumeCBM, weight: weightKG, count: palletCount })
                    : t('summary', { volume: volumeCBM, weight: weightKG })}
                </p>
              </div>
              <div className="text-right">
                <p className="text-sm text-gray-500">{t('ratesFound')}</p>
                <p className="text-3xl font-bold text-blue-600">{results.length}</p>
              </div>
            </div>
          </div>
        </div>

        {/* Best Options */}
        {bestOptions && (
          <div className="mb-12">
            <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
              <Trophy className="h-8 w-8 mr-3 text-yellow-500" />
              {t('bestChoices')}
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {optionCards.map(card => {
                if (!card.option) return null;

                return (
                  <div
                    key={card.type}
                    className={`border-2 ${card.colors.border} ${card.colors.bg} rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl`}
                  >
                    <div className={`p-6 ${card.colors.bg}`}>
                      <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center space-x-3">
                          <span>{card.icon}</span>
                          <div>
                            <h3 className={`text-xl font-bold ${card.colors.text}`}>{card.type}</h3>
                            <span className="text-xs bg-white px-2 py-1 rounded-full text-gray-600 font-medium">
                              {card.badge}
                            </span>
                          </div>
                        </div>
                      </div>

                      <div className="bg-white rounded-lg p-4 mb-4">
                        <div className="text-center mb-3">
                          <p className="text-sm text-gray-600 mb-1">{t('totalPrice')}</p>
                          <p className="text-3xl font-bold text-gray-900">{formatPrice(card.option.priceEUR)}</p>
                        </div>

                        <div className="border-t border-gray-200 pt-3 space-y-2 text-sm">
                          <div className="flex justify-between">
                            <span className="text-gray-600">{t('carrier')}</span>
                            <span className="font-semibold text-gray-900">{card.option.companyName}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-600">{t('transit')}</span>
                            <span className="font-semibold text-gray-900">
                              {t('transitDays', { days: card.option.transitDays })}
                            </span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-600">{t('type')}</span>
                            <span className="font-semibold text-gray-900">{card.option.containerType}</span>
                          </div>
                        </div>
                      </div>

                      <button
                        onClick={() => {
                          const rateData = encodeURIComponent(JSON.stringify(card.option));
                          router.push(`/dashboard/booking/new?rateData=${rateData}&volumeCBM=${volumeCBM}&weightKG=${weightKG}&palletCount=${palletCount}`);
                        }}
                        className={`w-full py-3 ${card.colors.button} text-white rounded-lg font-semibold transition-colors`}
                      >
                        {t('select')}
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* All Results */}
        <div>
          <h2 className="text-2xl font-bold text-gray-900 mb-6">{t('allResults', { count: results.length })}</h2>

          <div className="space-y-4">
            {results.map((result, index) => (
              <div key={index} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h3 className="text-xl font-bold text-gray-900">{result.companyName}</h3>
                    <p className="text-sm text-gray-500">
                      {result.origin} → {result.destination} • {result.containerType}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="text-3xl font-bold text-blue-600">{formatPrice(result.priceEUR)}</p>
                    <p className="text-sm text-gray-500">{t('totalPrice')}</p>
                  </div>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs text-gray-600 mb-1">{t('priceBreakdown.base')}</p>
                    <p className="font-semibold text-gray-900">
                      {formatPrice(result.priceBreakdown.basePrice)}
                    </p>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs text-gray-600 mb-1">{t('priceBreakdown.volume')}</p>
                    <p className="font-semibold text-gray-900">
                      {formatPrice(result.priceBreakdown.volumeCharge)}
                    </p>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs text-gray-600 mb-1">{t('priceBreakdown.weight')}</p>
                    <p className="font-semibold text-gray-900">
                      {formatPrice(result.priceBreakdown.weightCharge)}
                    </p>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-3">
                    <p className="text-xs text-gray-600 mb-1">{t('priceBreakdown.transit')}</p>
                    <p className="font-semibold text-gray-900">
                      {t('transitDays', { days: result.transitDays })}
                    </p>
                  </div>
                </div>

                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4 text-sm text-gray-600">
                    <span>{t('validUntil', { date: new Date(result.validUntil).toLocaleDateString(dateLocale) })}</span>
                    {result.hasSurcharges && (
                      <span className="text-orange-600 flex items-center">
                        <AlertTriangle className="h-4 w-4 mr-1" /> {t('surcharges')}
                      </span>
                    )}
                  </div>
                  <button
                    onClick={() => {
                      const rateData = encodeURIComponent(JSON.stringify(result));
                      router.push(`/dashboard/booking/new?rateData=${rateData}&volumeCBM=${volumeCBM}&weightKG=${weightKG}&palletCount=${palletCount}`);
                    }}
                    className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    {t('selectShort')}
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}