import { useEffect, useState } from "react"
import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
import { useWorkspace } from "../context/WorkspaceContext" 
import { useTranslation } from "../hooks/useTranslation" 
import { type Client } from "../types/client"
import { getClients } from "../api/clients"
import CreateClientModal from "../components/CreateClientModal"
import EditClientModal from "../components/EditClientModal"
import DeleteClientModal from "../components/DeleteClientModal"
import FilterBar from "../components/FilterBar"
import { Button } from "../components/ui/button"
import { Card } from "../components/ui/card"
import { Pagination } from "../components/Pagination"

export default function Clients() {
  const { activeWorkspace } = useWorkspace()
  const [clients, setClients] = useState<Client[]>([]) 
  const [isLoading, setIsLoading] = useState(true)
  
  // Pagination States
  const [currentPage, setCurrentPage] = useState(1)
  const [totalItems, setTotalItems] = useState(0)
  const [limit, setLimit] = useState(10)
  
  // Filter States
  const [searchQuery, setSearchQuery] = useState("")
  const [debouncedSearch, setDebouncedSearch] = useState("")
  const [ordering, setOrdering] = useState("-created_at")
  
  // Modal States
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
  const [editClient, setEditClient] = useState<Client | null>(null)
  const [deleteClient, setDeleteClient] = useState<Client | null>(null)
  
  const { t, lang } = useTranslation()
  const isFa = lang === "fa"

  const orderingOptions = [
    { value: "-created_at", label: t.ordering?.createdAtDesc || "Newest First" },
    { value: "created_at", label: t.ordering?.createdAt || "Oldest First" },
    { value: "name", label: t.ordering?.name || "Name (A-Z)" },
    { value: "-name", label: t.ordering?.nameDesc || "Name (Z-A)" },
    { value: "-updated_at", label: t.ordering?.updatedAtDesc || "Recently Updated" },
  ]

  useEffect(() => {
    setCurrentPage(1)
  }, [debouncedSearch, ordering])

  // Debounce search input to avoid spamming the API
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearch(searchQuery)
    }, 500)
    return () => clearTimeout(handler)
  }, [searchQuery])

  const fetchClientsList = async () => {
    if (!activeWorkspace?.id) {
      setIsLoading(false) 
      return
    }
    
    setIsLoading(true)
    try {
      const offset = (currentPage - 1) * limit
      const data: any = await getClients(activeWorkspace.id, debouncedSearch, ordering, limit, offset)
      
      const items = data?.results || (Array.isArray(data) ? data : [])
      const count = data?.count !== undefined ? data.count : items.length
      
      setClients(items)
      setTotalItems(count)
    } catch (error) {
      console.error(t.clients.errors.fetchFailed, error)
      setClients([]) 
    } finally {
      setIsLoading(false)
    }
  }

  const formatDate = (dateStr: string | undefined) => {
    if (!dateStr) return "-"
    try {
      const date = new Date(dateStr)
      return new Intl.DateTimeFormat(isFa ? "fa-IR" : "en-US", {
        dateStyle: "long",
        timeZone: "Asia/Tehran"
      }).format(date)
    } catch (e) {
      return dateStr
    }
  }

  useEffect(() => {
    fetchClientsList()
  }, [activeWorkspace?.id, debouncedSearch, ordering, currentPage, limit])

  if (!activeWorkspace) {
    return (
      <div className="p-6 text-center text-slate-500">
        {t.clients.selectWorkspace}
      </div>
    )
  }

  return (
    <div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.clients.title}</h1>
          <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
            {t.clients.description(activeWorkspace.name)}
          </p>
        </div>
        
        <Button onClick={() => setIsCreateModalOpen(true)} className="flex items-center gap-2">
          <Plus className="w-4 h-4" />
          {t.clients.addClient}
        </Button>
      </div>

      <FilterBar
        searchQuery={searchQuery}
        setSearchQuery={setSearchQuery}
        ordering={ordering}
        setOrdering={setOrdering}
        orderingOptions={orderingOptions}
        searchPlaceholder={t.clients.searchPlaceholder}
      />

      <Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
        <div className="p-0">
          {isLoading ? (
            <div className="flex justify-center items-center p-12 text-slate-500">
              <Loader2 className="w-8 h-8 animate-spin" />
            </div>
          ) : clients.length === 0 ? (
            <div className="text-center p-12">
              <Building2 className="w-12 h-12 text-slate-300 dark:text-slate-700 mx-auto mb-3" />
              <h3 className="text-lg font-medium text-slate-900 dark:text-white">{t.clients.noClients}</h3>
              <p className="text-slate-500 dark:text-slate-400 mt-1">
                {searchQuery ? t.clients.noClientsSearch : t.clients.noClientsAdd}
              </p>
            </div>
          ) : (
            <ul className="divide-y divide-slate-200 dark:divide-slate-800">
              {clients.map((client) => (
                <li key={client.id} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <h4 className="font-medium text-slate-900 dark:text-white truncate">{client.name}</h4>
                    {client.notes && (
                      <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
                        {client.notes}
                      </p>
                    )}
                    <div className="text-[11px] text-slate-400 mt-3 font-medium">
                      {t.clients.addedOn}: {formatDate(client.created_at)}
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-1 shrink-0">
                    <Button 
                      variant="ghost" 
                      size="icon"
                      onClick={() => setEditClient(client)}
                      className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
                    >
                      <Pencil className="w-4 h-4" />
                    </Button>
                    <Button 
                      variant="ghost" 
                      size="icon"
                      onClick={() => setDeleteClient(client)}
                      className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
      </Card>

      {!isLoading && clients.length > 0 && (
        <Pagination
          currentPage={currentPage}
          totalCount={totalItems}
          limit={limit}
          onPageChange={setCurrentPage}
          onLimitChange={setLimit}
        />
      )}

      <CreateClientModal
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        onSuccess={fetchClientsList}
        workspaceId={activeWorkspace.id}
      />

      <EditClientModal
        isOpen={!!editClient}
        onClose={() => setEditClient(null)}
        onSuccess={fetchClientsList}
        client={editClient}
      />

      <DeleteClientModal
        isOpen={!!deleteClient}
        onClose={() => setDeleteClient(null)}
        onSuccess={fetchClientsList}
        client={deleteClient}
      />
    </div>
  )
}