'use client';

import { useState, useMemo, useEffect } from 'react';
import Link from 'next/link';
import { MobileLayout } from '../../../../components/mobile-layout';
import { useSupplierDirectory } from '../../../../hooks/use-supplier-directory';
import { LiveAllocationFinderModal } from '../../../../components/ui/live-allocation-finder-modal';
import { Search, RefreshCw, Phone, MapPin, Building2, Users, AlertCircle } from 'lucide-react';

export default function SuppliersPage() {
  const {
    suppliers: allSuppliers,
    availableRegions,
    isRefreshing,
    error,
    lastRefreshed,
    stats,
    refreshSuppliers,
  } = useSupplierDirectory();

  const [searchQuery, setSearchQuery] = useState('');
  const [selectedRegion, setSelectedRegion] = useState<string>('');
  const [refreshPrompt, setRefreshPrompt] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const [showAllocationFinder, setShowAllocationFinder] = useState(false);

  const PAGE_SIZE = 15;

  // Auto-refresh on mount if no regions available (new data structure)
  useEffect(() => {
    if (allSuppliers.length > 0 && availableRegions.length === 0) {
      // Old cache detected, trigger refresh
      refreshSuppliers(false);
    }
  }, [allSuppliers.length, availableRegions.length, refreshSuppliers]);

  useEffect(() => {
    // Reset to first page when filters change so results start at the top.
    setPage(1);
  }, [searchQuery, selectedRegion]);

  // Use availableRegions from the hook (real Ghana regions from PO API)
  const regions = useMemo(() => {
    return availableRegions.map(r => ({
      code: r.code,
      name: r.name,
      count: r.supplierCount
    }));
  }, [availableRegions]);

  // Filter suppliers based on search and region
  const filteredSuppliers = useMemo(() => {
    return allSuppliers.filter(supplier => {
      const name = typeof supplier.name === 'string' ? supplier.name : String(supplier.name ?? '');
      const phone = supplier.phone || '';
      const code = supplier.code || '';

      const matchesSearch = !searchQuery || 
        name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        phone.includes(searchQuery) ||
        code.toLowerCase().includes(searchQuery.toLowerCase());
      
      // Match by region code or if supplier has that region in their regions array
      const matchesRegion = !selectedRegion || 
        (supplier as any).regionCode === selectedRegion ||
        (supplier as any).regions?.some((r: any) => r.code === selectedRegion);
      
      return matchesSearch && matchesRegion;
    });
  }, [allSuppliers, searchQuery, selectedRegion]);

  const totalPages = Math.max(1, Math.ceil(filteredSuppliers.length / PAGE_SIZE));
  const currentPage = Math.min(page, totalPages);

  const paginatedSuppliers = useMemo(() => {
    const start = (currentPage - 1) * PAGE_SIZE;
    const end = start + PAGE_SIZE;
    return filteredSuppliers.slice(start, end);
  }, [filteredSuppliers, currentPage]);

  const handleRefresh = async () => {
    // Force refresh to bypass cache and trigger live API sync
    const result = await refreshSuppliers(true);
    if (result.status === 'cooldown') {
      const seconds = Math.ceil(result.retryInMs / 1000);
      setRefreshPrompt(`Please wait ${seconds}s before refreshing again.`);
      setTimeout(() => setRefreshPrompt(null), 5000);
    } else if (result.status === 'ok') {
      setRefreshPrompt(`Updated! ${result.total} suppliers synced.`);
      setTimeout(() => setRefreshPrompt(null), 3000);
    } else {
      setRefreshPrompt(result.message);
      setTimeout(() => setRefreshPrompt(null), 5000);
    }
  };

  const syncedLabel = lastRefreshed
    ? `Last synced ${new Date(lastRefreshed).toLocaleString()}`
    : 'Not synced yet';

  return (
    <MobileLayout>
      <div className="min-h-screen bg-slate-50 pb-24">
        {/* Hero Header */}
        <div className="relative bg-gradient-to-br from-emerald-500 via-teal-600 to-cyan-500 px-4 pb-20 pt-6">
          <div className="absolute inset-0 overflow-hidden">
            <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/5"></div>
            <div className="absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-white/5"></div>
          </div>
          
          <div className="relative">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm">
                  <Users className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h1 className="text-xl font-bold text-white">Supplier Directory</h1>
                  <p className="text-sm text-white/80">{stats.total} suppliers available</p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setShowAllocationFinder(true)}
                  className="flex h-10 items-center gap-2 rounded-full bg-white/20 px-4 backdrop-blur-sm transition-all active:scale-95"
                  aria-label="Allocation Finder"
                  title="Find supplier by school & commodity"
                >
                  <Building2 className="h-4 w-4 text-white" />
                  <span className="text-sm font-medium text-white">Find</span>
                </button>
                <button
                  onClick={handleRefresh}
                  disabled={isRefreshing}
                  className="flex h-10 w-10 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm transition-all active:scale-95 disabled:opacity-60"
                  aria-label="Refresh suppliers"
                  title="Refresh suppliers"
                >
                  <RefreshCw className={`h-5 w-5 text-white ${isRefreshing ? 'animate-spin' : ''}`} />
                </button>
              </div>
            </div>
            
            <p className="mt-3 text-xs text-white/70">{syncedLabel}</p>
            
            {refreshPrompt && (
              <div className="mt-2 rounded-lg bg-white/20 px-3 py-2 text-sm text-white backdrop-blur-sm">
                {refreshPrompt}
              </div>
            )}
          </div>
        </div>

        {/* Search and Filter Section */}
        <div className="relative -mt-14 px-4">
          <div className="overflow-hidden rounded-2xl bg-white shadow-lg">
            {/* Search Input */}
            <div className="border-b border-slate-100 p-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Search by name, phone, or code..."
                  className="w-full rounded-xl border border-slate-200 bg-slate-50 py-3 pl-10 pr-4 text-sm text-slate-900 placeholder-slate-400 transition-all focus:border-emerald-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500/20"
                />
              </div>
            </div>
            
            {/* Region Filter Pills */}
            <div className="flex items-center gap-2 overflow-x-auto px-4 py-3">
              <button
                onClick={() => setSelectedRegion('')}
                className={`flex-shrink-0 rounded-full px-3 py-1.5 text-xs font-medium transition-all ${
                  !selectedRegion
                    ? 'bg-emerald-500 text-white'
                    : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                }`}
              >
                All Regions
              </button>
              {regions.map(region => (
                <button
                  key={region.code}
                  onClick={() => setSelectedRegion(region.code)}
                  className={`flex-shrink-0 rounded-full px-3 py-1.5 text-xs font-medium transition-all whitespace-nowrap ${
                    selectedRegion === region.code
                      ? 'bg-emerald-500 text-white'
                      : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                  }`}
                  title={`${region.count} suppliers`}
                >
                  {region.name.replace(' REGION', '')}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Results Count */}
        <div className="mt-4 px-4">
          <p className="text-sm text-slate-500">
            Showing {filteredSuppliers.length} of {allSuppliers.length} suppliers · Page {currentPage} / {totalPages}
          </p>
        </div>

        {/* Suppliers List */}
        <div className="mt-3 space-y-3 px-4">
          {isRefreshing && allSuppliers.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12">
              <div className="h-10 w-10 animate-spin rounded-full border-4 border-emerald-200 border-t-emerald-500"></div>
              <p className="mt-4 text-sm text-slate-500">Loading suppliers...</p>
            </div>
          ) : error && allSuppliers.length === 0 ? (
            <div className="rounded-2xl border border-red-200 bg-red-50 p-6 text-center">
              <AlertCircle className="mx-auto h-10 w-10 text-red-400" />
              <p className="mt-3 font-medium text-red-800">Failed to load suppliers</p>
              <p className="mt-1 text-sm text-red-600">{error}</p>
              <button
                onClick={handleRefresh}
                className="mt-4 rounded-lg bg-red-100 px-4 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-200"
              >
                Try Again
              </button>
            </div>
          ) : filteredSuppliers.length === 0 ? (
            <div className="rounded-2xl border border-slate-200 bg-white p-6 text-center">
              <Search className="mx-auto h-10 w-10 text-slate-300" />
              <p className="mt-3 font-medium text-slate-700">No suppliers found</p>
              <p className="mt-1 text-sm text-slate-500">Try adjusting your search or filter</p>
            </div>
          ) : (
            paginatedSuppliers.map(supplier => {
              const name = String(supplier.name ?? 'Supplier');
              const href = `/field-staff/suppliers/${supplier.id}?name=${encodeURIComponent(name)}${supplier.code ? `&code=${encodeURIComponent(supplier.code)}` : ''}${supplier.region ? `&region=${encodeURIComponent(supplier.region)}` : ''}${supplier.phone ? `&phone=${encodeURIComponent(supplier.phone)}` : ''}`;

              return (
                <Link
                  key={supplier.id}
                  href={href}
                  className="block overflow-hidden rounded-2xl bg-white shadow-sm transition-all active:scale-[0.99]"
                >
                  <div className="p-4">
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex items-start gap-3">
                        <div className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-500 text-lg font-bold text-white">
                          {name.charAt(0).toUpperCase()}
                        </div>
                        <div className="min-w-0">
                          <h3 className="truncate font-semibold text-slate-900">{name}</h3>
                          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500">
                            {supplier.region && (
                              <span className="flex items-center gap-1 text-emerald-600 font-medium">
                                <MapPin className="h-3 w-3" />
                                {supplier.region.replace(' REGION', '')}
                              </span>
                            )}
                            {supplier.code && (
                              <span className="flex items-center gap-1">
                                <Building2 className="h-3 w-3" />
                                {supplier.code}
                              </span>
                            )}
                          </div>
                          {/* Show all regions this supplier delivers to */}
                          {(supplier as any).regions?.length > 1 && (
                            <div className="mt-1 flex flex-wrap gap-1">
                              {(supplier as any).regions.slice(0, 4).map((r: any, idx: number) => (
                                <span key={idx} className="inline-flex items-center rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-600">
                                  {r.code}
                                </span>
                              ))}
                              {(supplier as any).regions.length > 4 && (
                                <span className="inline-flex items-center rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-500">
                                  +{(supplier as any).regions.length - 4}
                                </span>
                              )}
                            </div>
                          )}
                        </div>
                      </div>
                      
                      {supplier.phone && (
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            window.location.href = `tel:${supplier.phone}`;
                          }}
                          className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-500 text-white shadow-md transition-transform active:scale-95"
                          title={`Call ${name}`}
                        >
                          <Phone className="h-5 w-5" />
                        </button>
                      )}
                    </div>
                    
                    {supplier.phone && (
                      <div className="mt-3 flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-2">
                        <Phone className="h-4 w-4 text-slate-400" />
                        <span className="text-sm font-medium text-emerald-600">
                          {supplier.phone}
                        </span>
                      </div>
                    )}
                    
                    {!supplier.phone && (
                      <div className="mt-3 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
                        No phone number available
                      </div>
                    )}
                  </div>
                </Link>
              );
            })
          )}
        </div>

        {/* Pagination Controls */}
        {filteredSuppliers.length > 0 && (
          <div className="mt-4 px-4 pb-6">
            <div className="flex items-center justify-between rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
              <div className="text-xs text-slate-500">
                Page {currentPage} of {totalPages}
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setPage((prev) => Math.max(1, prev - 1))}
                  disabled={currentPage <= 1}
                  className="rounded-lg border border-slate-200 px-3 py-2 text-xs font-medium text-slate-600 transition-colors disabled:cursor-not-allowed disabled:opacity-50 hover:bg-slate-50"
                >
                  Previous
                </button>
                <button
                  onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
                  disabled={currentPage >= totalPages}
                  className="rounded-lg bg-emerald-500 px-3 py-2 text-xs font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50 hover:bg-emerald-600"
                >
                  Next
                </button>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Allocation Finder Modal */}
      <LiveAllocationFinderModal 
        isOpen={showAllocationFinder}
        onClose={() => setShowAllocationFinder(false)}
        onSupplierFound={(supplier, school, commodity) => {
          console.log('Found supplier:', supplier, 'for', school.name, commodity);
        }}
      />
    </MobileLayout>
  );
}