import { useState, useEffect } from 'react'
import axios from 'axios'
import { 
  Building, Search, Upload, Globe, MapPin, Play, Search as SearchIcon, Loader2,
  LayoutGrid, List, ChevronLeft, ChevronRight, ArrowDownUp, Flag
} from 'lucide-react'
import clsx from 'clsx'

interface Company {
  id: number
  name: string
  city: string | null
  country: string
  website: string | null
  status: string
  industry_ai: string | null
  created_at: string
  updated_at: string
  has_pending_mistakes: boolean
}

interface CompanyTableProps {
  apiBase: string
  onRowClick: (companyId: number) => void
  refreshKey: number
  onImportClick: () => void
}

export function CompanyTable({ apiBase, onRowClick, refreshKey, onImportClick }: CompanyTableProps) {
  const [data, setData] = useState<Company[]>([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(0)
  const [search, setSearch] = useState("")
  const [sortBy, setSortBy] = useState('name_asc')
  const [loading, setLoading] = useState(false)
  const [processingId, setProcessingId] = useState<number | null>(null)
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
  const limit = 50

  const fetchData = async () => {
    setLoading(true)
    try {
      const res = await axios.get(`${apiBase}/companies?skip=${page * limit}&limit=${limit}&search=${search}&sort_by=${sortBy}`)
      setData(res.data.items)
      setTotal(res.data.total)
    } catch (e) { 
      console.error("Failed to fetch companies", e)
    } 
    finally { setLoading(false) }
  }

  useEffect(() => {
    const timer = setTimeout(fetchData, 300)
    return () => clearTimeout(timer)
  }, [page, search, refreshKey, sortBy])

  const triggerDiscovery = async (id: number) => {
    setProcessingId(id);
    try {
      await axios.post(`${apiBase}/enrich/discover`, { company_id: id });
      setTimeout(fetchData, 2000);
    } catch (e) { alert("Discovery Error"); } 
    finally { setProcessingId(null); }
  }

  const triggerAnalysis = async (id: number) => {
    setProcessingId(id);
    try {
      await axios.post(`${apiBase}/enrich/analyze`, { company_id: id });
      setTimeout(fetchData, 2000);
    } catch (e) { alert("Analysis Error"); }
    finally { setProcessingId(null); }
  }

  return (
    <div className="flex flex-col h-full bg-white dark:bg-slate-900 transition-colors">
      {/* Toolbar */}
      <div className="flex flex-col md:flex-row gap-4 p-4 border-b border-slate-200 dark:border-slate-800 items-center justify-between bg-slate-50 dark:bg-slate-950/50">
        <div className="flex items-center gap-2 text-slate-700 dark:text-slate-300 font-bold text-lg">
           <Building className="h-5 w-5" />
           <h2>Companies ({total})</h2>
        </div>

        <div className="flex flex-1 w-full md:w-auto items-center gap-2 max-w-2xl">
           <div className="relative flex-1">
             <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
             <input type="text" placeholder="Search companies..." 
               className="w-full pl-10 pr-4 py-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md text-sm text-slate-900 dark:text-slate-200 focus:ring-2 focus:ring-blue-500 outline-none"
               value={search} onChange={e => { setSearch(e.target.value); setPage(0); }}/>
           </div>
            <div className="relative flex items-center text-slate-700 dark:text-slate-300">
                <ArrowDownUp className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 pointer-events-none" />
                <select value={sortBy} onChange={e => setSortBy(e.target.value)}
                    className="pl-8 pr-4 py-2 appearance-none bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                    <option value="name_asc">Alphabetical</option>
                    <option value="created_desc">Newest First</option>
                    <option value="updated_desc">Last Modified</option>
                </select>
            </div>
           <div className="flex items-center bg-slate-200 dark:bg-slate-800 p-1 rounded-md text-slate-700 dark:text-slate-300">
                <button onClick={() => setViewMode('grid')} className={clsx("p-1.5 rounded", viewMode === 'grid' && "bg-white dark:bg-slate-700 shadow text-blue-600 dark:text-white")} title="Grid View"><LayoutGrid className="h-4 w-4" /></button>
                <button onClick={() => setViewMode('list')} className={clsx("p-1.5 rounded", viewMode === 'list' && "bg-white dark:bg-slate-700 shadow text-blue-600 dark:text-white")} title="List View"><List className="h-4 w-4" /></button>
           </div>
           <button onClick={onImportClick} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold rounded-md shadow-sm">
             <Upload className="h-4 w-4" /> <span className="hidden md:inline">Import</span>
           </button>
        </div>
      </div>
      
      {/* Content Area */}
      <div className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950/30">
        {loading && <div className="p-4 text-center text-slate-500">Loading companies...</div>}
        
        {data.length === 0 && !loading ? (
             <div className="p-12 text-center text-slate-500">
                <Building className="h-12 w-12 mx-auto mb-4 opacity-20" />
                <p className="text-lg font-medium">No companies found</p>
                <p className="text-slate-400 mt-2">Import a list or create one manually to get started.</p>
            </div>
        ) : viewMode === 'grid' ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4">
                {data.map((c) => (
                    <div key={c.id} onClick={() => onRowClick(c.id)}
                        className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg p-4 hover:shadow-lg transition-all flex flex-col gap-3 group cursor-pointer border-l-4"
                        style={{ borderLeftColor: c.status === 'ENRICHED' ? '#22c55e' : c.status === 'DISCOVERED' ? '#3b82f6' : '#94a3b8' }}>
                        <div className="flex items-start justify-between">
                            <div className="min-w-0 flex-1">
                                <div className="flex items-center gap-2">
                                    <Flag className={clsx("h-3 w-3 text-slate-300 dark:text-slate-600", c.has_pending_mistakes && "text-red-500 fill-red-500")} />
                                    <div className="font-bold text-slate-900 dark:text-white text-sm truncate" title={c.name}>{c.name}</div>
                                </div>
                                <div className="flex items-center gap-1 text-[10px] text-slate-500 dark:text-slate-400 font-medium">
                                    {c.city && c.country ? (<><MapPin className="h-3 w-3" /> {c.city} <span className="text-slate-400">({c.country})</span></>) : (<span className="italic opacity-50">-</span>)}
                                </div>
                            </div>
                            <div className="flex gap-1 ml-2">
                                {processingId === c.id ? <Loader2 className="h-4 w-4 animate-spin text-blue-500" /> : c.status === 'NEW' || !c.website || c.website === 'k.A.' ? (
                                    <button onClick={(e) => { e.stopPropagation(); triggerDiscovery(c.id); }} className="p-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded hover:bg-blue-600 hover:text-white transition-colors"><SearchIcon className="h-3.5 w-3.5" /></button>
                                ) : (
                                    <button onClick={(e) => { e.stopPropagation(); triggerAnalysis(c.id); }} className="p-1.5 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded hover:bg-blue-600 hover:text-white transition-colors"><Play className="h-3.5 w-3.5 fill-current" /></button>
                                )}
                            </div>
                        </div>
                        <div className="space-y-2 pt-2 border-t border-slate-100 dark:border-slate-800/50">
                            {c.website && c.website !== "k.A." ? (
                                <div className="flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400 font-medium truncate">
                                    <Globe className="h-3 w-3" />
                                    <span>{new URL(c.website).hostname.replace('www.', '')}</span>
                                </div>
                            ) : (<div className="text-xs text-slate-400 italic">No website found</div>)}
                            <div className="text-[10px] text-slate-500 uppercase font-bold tracking-wider truncate">{c.industry_ai || "Industry Pending"}</div>
                        </div>
                    </div>
                ))}
            </div>
        ) : (
            <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-800">
                <thead className="bg-slate-100 dark:bg-slate-950/50">
                    <tr>
                        <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900 dark:text-white">Company</th>
                        <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900 dark:text-white">Location</th>
                        <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900 dark:text-white">Website</th>
                        <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-slate-900 dark:text-white">AI Industry</th>
                        <th scope="col" className="relative px-3 py-3.5"><span className="sr-only">Actions</span></th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-slate-200 dark:divide-slate-800 bg-white dark:bg-slate-900">
                    {data.map((c) => (
                        <tr key={c.id} onClick={() => onRowClick(c.id)} className="hover:bg-slate-50 dark:hover:bg-slate-800/50 cursor-pointer">
                            <td className="whitespace-nowrap px-3 py-4 text-sm font-medium text-slate-900 dark:text-white">
                                <div className="flex items-center gap-2">
                                    <Flag className={clsx("h-3 w-3 text-slate-300 dark:text-slate-600", c.has_pending_mistakes && "text-red-500 fill-red-500")} />
                                    <span>{c.name}</span>
                                </div>
                            </td>
                            <td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500 dark:text-slate-400">
                                {c.city && c.country ? `${c.city}, (${c.country})` : '-'}
                            </td>
                            <td className="whitespace-nowrap px-3 py-4 text-sm text-blue-600 dark:text-blue-400">
                                {c.website && c.website !== "k.A." ? <a href={c.website} target="_blank" rel="noreferrer">{new URL(c.website).hostname.replace('www.', '')}</a> : 'n/a'}
                            </td>
                            <td className="whitespace-nowrap px-3 py-4 text-sm text-slate-500 dark:text-slate-400">{c.industry_ai || 'Pending'}</td>
                            <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                                {processingId === c.id ? <Loader2 className="h-4 w-4 animate-spin text-blue-500" /> : c.status === 'NEW' || !c.website || c.website === 'k.A.' ? (
                                    <button onClick={(e) => { e.stopPropagation(); triggerDiscovery(c.id); }} className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"><SearchIcon className="h-4 w-4" /></button>
                                ) : (
                                    <button onClick={(e) => { e.stopPropagation(); triggerAnalysis(c.id); }} className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"><Play className="h-4 w-4 fill-current" /></button>
                                )}
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        )}
      </div>

      {/* Pagination */}
      <div className="p-3 border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 flex justify-between items-center text-xs text-slate-500 dark:text-slate-400">
        <span>{total} Companies total</span>
        <div className="flex gap-1 items-center">
          <button disabled={page === 0} onClick={() => setPage(p => p - 1)} className="p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-30"><ChevronLeft className="h-4 w-4" /></button>
          <span>Page {page + 1}</span>
          <button disabled={(page + 1) * limit >= total} onClick={() => setPage(p => p + 1)} className="p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800 disabled:opacity-30"><ChevronRight className="h-4 w-4" /></button>
        </div>
      </div>
    </div>
  )
}