"use client"

import { useEffect, useMemo, useState, type CSSProperties } from "react"
import { Printer, Download, MoreVertical, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useContactsStore } from "@/lib/contacts/contacts-store"
import { useNavStore } from "@/lib/stores/nav-store"
import { searchContacts } from "@/lib/contacts/fuzzy-search"
import { printContacts } from "@/lib/contacts/print-contacts"
import { downloadContactsCsv, downloadContactsVCard } from "@/lib/contacts/export-contacts"
import { fullContactDisplayName } from "@/lib/contacts/types"
import { avatarColor, senderInitial } from "@/lib/sender-display"
import type { FullContact } from "@/lib/contacts/types"
import {
  contactsTableGridStyle,
  isContactsColumnVisible,
  useContactsTableColumns,
  type ContactsTableColumn,
} from "@/hooks/use-contacts-table-columns"
import type { ContactsPageView } from "./contacts-app-shell"
import {
  CONTACTS_HEADING_TEXT,
  CONTACTS_ICON_BTN_CLASS,
  CONTACTS_MUTED_TEXT,
  CONTACTS_TABLE_HEADER_CLASS,
  CONTACTS_TABLE_ROW_CLASS,
} from "@/lib/contacts-chrome-classes"
import { MAIL_SIDEBAR_MENU_SURFACE_CLASS } from "@/lib/mail-chrome-classes"
import { cn } from "@/lib/utils"

const DATA_COLUMNS: Exclude<ContactsTableColumn, "checkbox">[] = [
  "name",
  "email",
  "phone",
  "job",
  "labels",
]

interface ContactsTableProps {
  view: ContactsPageView
  searchQuery: string
  activeLabelId?: string | null
  onOpenContact: (id: string) => void
}

export function ContactsTable({ view, searchQuery, activeLabelId, onOpenContact }: ContactsTableProps) {
  const { visibleColumns, columnLabels } = useContactsTableColumns()
  const gridStyle = contactsTableGridStyle(visibleColumns)
  const contacts = useContactsStore((s) => s.contacts)
  const softDeleteContact = useContactsStore((s) => s.softDeleteContact)
  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set())

  const filteredContacts = useMemo(() => {
    let list = contacts

    if (view === "frequent") {
      list = [...contacts]
        .filter((c) => (c.interactionCount ?? 0) > 0)
        .sort((a, b) => (b.interactionCount ?? 0) - (a.interactionCount ?? 0))
    } else if (view === "other") {
      list = contacts.filter((c) => c.isOtherContact === true)
    } else if (view === "label" && activeLabelId) {
      list = contacts.filter((c) => c.labels?.includes(activeLabelId))
    }

    if (searchQuery.trim()) {
      list = searchContacts(list, searchQuery)
    } else if (view !== "frequent") {
      list = [...list].sort((a, b) => {
        const nameA = fullContactDisplayName(a) || a.emails[0]?.value || ""
        const nameB = fullContactDisplayName(b) || b.emails[0]?.value || ""
        return nameA.localeCompare(nameB, "fr")
      })
    }

    return list
  }, [contacts, view, searchQuery, activeLabelId])

  const filteredIds = useMemo(
    () => new Set(filteredContacts.map((c) => c.id)),
    [filteredContacts]
  )

  const selectedContacts = useMemo(
    () => filteredContacts.filter((c) => selectedIds.has(c.id)),
    [filteredContacts, selectedIds]
  )

  const selectionCount = selectedContacts.length
  const allFilteredSelected =
    filteredContacts.length > 0 &&
    filteredContacts.every((c) => selectedIds.has(c.id))
  const someFilteredSelected =
    filteredContacts.some((c) => selectedIds.has(c.id)) && !allFilteredSelected

  useEffect(() => {
    setSelectedIds(new Set())
  }, [view, activeLabelId])

  useEffect(() => {
    setSelectedIds((prev) => {
      const next = new Set([...prev].filter((id) => filteredIds.has(id)))
      return next.size === prev.size ? prev : next
    })
  }, [filteredIds])

  const labelRows = useNavStore((s) => s.labelRows)
  const activeLabelName = activeLabelId
    ? labelRows.find((l) => l.id === activeLabelId)?.label
    : null

  const viewTitle = view === "frequent"
    ? "Contacts fréquents"
    : view === "other"
      ? "Autres contacts"
      : view === "label" && activeLabelName
        ? activeLabelName
        : `Contacts (${contacts.length})`

  function toggleContact(id: string, checked: boolean) {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (checked) next.add(id)
      else next.delete(id)
      return next
    })
  }

  function toggleSelectAll(checked: boolean) {
    if (checked) {
      setSelectedIds(new Set(filteredContacts.map((c) => c.id)))
    } else {
      setSelectedIds(new Set())
    }
  }

  function handleDeleteSelected() {
    if (selectionCount === 0) return
    for (const contact of selectedContacts) {
      softDeleteContact(contact.id, "Supprimé manuellement")
    }
    setSelectedIds(new Set())
  }

  function handleExportVcf() {
    if (selectionCount === 0) return
    const filename =
      selectionCount === 1
        ? `${sanitizeExportName(selectedContacts[0])}.vcf`
        : "contacts.vcf"
    downloadContactsVCard(selectedContacts, filename)
  }

  function handleExportCsv() {
    if (selectionCount === 0) return
    const filename =
      selectionCount === 1
        ? `${sanitizeExportName(selectedContacts[0])}.csv`
        : "contacts.csv"
    downloadContactsCsv(selectedContacts, filename)
  }

  return (
    <div className="px-3 py-4 sm:px-6">
      <div className="mb-2 flex items-center justify-between gap-2">
        <div className="min-w-0">
          <h1 className={cn("truncate text-xl font-normal sm:text-2xl", CONTACTS_HEADING_TEXT)}>{viewTitle}</h1>
          {selectionCount > 0 && (
            <p className={cn("mt-0.5 text-sm", CONTACTS_MUTED_TEXT)}>
              {selectionCount} sélectionné{selectionCount > 1 ? "s" : ""}
            </p>
          )}
        </div>
        <div className="flex items-center gap-1">
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className={cn("h-9 w-9 rounded-full", CONTACTS_ICON_BTN_CLASS)}
            onClick={() => printContacts(filteredContacts, viewTitle)}
            aria-label="Imprimer"
          >
            <Printer className="h-5 w-5" />
          </Button>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className={cn("h-9 w-9 rounded-full disabled:opacity-40", CONTACTS_ICON_BTN_CLASS)}
                disabled={selectionCount === 0}
                aria-label="Exporter la sélection"
              >
                <Download className="h-5 w-5" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className={cn("w-52", MAIL_SIDEBAR_MENU_SURFACE_CLASS)}>
              <DropdownMenuItem onClick={handleExportVcf}>
                Exporter au format vCard (.vcf)
              </DropdownMenuItem>
              <DropdownMenuItem onClick={handleExportCsv}>
                Exporter au format CSV (.csv)
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          <Button
            type="button"
            variant="ghost"
            size="icon"
            className={cn("h-9 w-9 rounded-full disabled:opacity-40", CONTACTS_ICON_BTN_CLASS)}
            disabled={selectionCount === 0}
            onClick={handleDeleteSelected}
            aria-label="Supprimer la sélection"
          >
            <Trash2 className="h-5 w-5" />
          </Button>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className={cn("h-9 w-9 rounded-full", CONTACTS_ICON_BTN_CLASS)}
                aria-label="Plus d'actions"
              >
                <MoreVertical className="h-5 w-5" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className={cn("w-48", MAIL_SIDEBAR_MENU_SURFACE_CLASS)}>
              <DropdownMenuItem
                onClick={() => toggleSelectAll(true)}
                disabled={filteredContacts.length === 0}
              >
                Tout sélectionner
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => setSelectedIds(new Set())}
                disabled={selectionCount === 0}
              >
                Désélectionner tout
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      <div
        className={CONTACTS_TABLE_HEADER_CLASS}
        style={gridStyle}
      >
        {isContactsColumnVisible(visibleColumns, "checkbox") && (
          <span className="flex items-center justify-center">
            <Checkbox
              checked={allFilteredSelected ? true : someFilteredSelected ? "indeterminate" : false}
              onCheckedChange={(checked) => toggleSelectAll(checked === true)}
              aria-label="Tout sélectionner"
            />
          </span>
        )}
        {DATA_COLUMNS.map((column) =>
          isContactsColumnVisible(visibleColumns, column) ? (
            <span key={column}>{columnLabels[column]}</span>
          ) : null
        )}
      </div>

      {filteredContacts.map((contact) => (
        <ContactTableRow
          key={contact.id}
          contact={contact}
          visibleColumns={visibleColumns}
          gridStyle={gridStyle}
          selected={selectedIds.has(contact.id)}
          onToggleSelect={(checked) => toggleContact(contact.id, checked)}
          onOpen={() => onOpenContact(contact.id)}
        />
      ))}

      {filteredContacts.length === 0 && (
        <div className="py-12 text-center text-sm text-muted-foreground">
          Aucun contact trouvé
        </div>
      )}
    </div>
  )
}

function sanitizeExportName(contact: FullContact): string {
  const name = fullContactDisplayName(contact) || contact.emails[0]?.value || "contact"
  return name.replace(/[/\\?%*:|"<>]/g, "-").trim() || "contact"
}

function ContactTableRow({
  contact,
  visibleColumns,
  gridStyle,
  selected,
  onToggleSelect,
  onOpen,
}: {
  contact: FullContact
  visibleColumns: ContactsTableColumn[]
  gridStyle: CSSProperties
  selected: boolean
  onToggleSelect: (checked: boolean) => void
  onOpen: () => void
}) {
  const displayName = fullContactDisplayName(contact)
  const name = displayName || contact.emails[0]?.value || contact.phones[0]?.value || "?"
  const color = avatarColor(name)
  const initial = senderInitial(name)
  const labelRows = useNavStore((s) => s.labelRows)

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onOpen}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault()
          onOpen()
        }
      }}
      className={cn(
        CONTACTS_TABLE_ROW_CLASS,
        selected && "bg-mail-nav-selected"
      )}
      style={gridStyle}
    >
      {isContactsColumnVisible(visibleColumns, "checkbox") && (
        <span
          className="flex items-center justify-center"
          onClick={(e) => e.stopPropagation()}
          onKeyDown={(e) => e.stopPropagation()}
        >
          <Checkbox
            checked={selected}
            onCheckedChange={(checked) => onToggleSelect(checked === true)}
            aria-label={`Sélectionner ${name}`}
          />
        </span>
      )}

      {isContactsColumnVisible(visibleColumns, "name") && (
        <span className="flex min-w-0 items-center gap-2 sm:gap-3">
          {contact.avatarUrl ? (
            <img src={contact.avatarUrl} alt={name} className="h-8 w-8 shrink-0 rounded-full object-cover" />
          ) : (
            <span
              className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-medium text-white"
              style={{ backgroundColor: color }}
            >
              {initial}
            </span>
          )}
          <span className="min-w-0 flex-1">
            <span className="block truncate text-foreground">{name}</span>
            {!isContactsColumnVisible(visibleColumns, "email") && contact.emails[0]?.value && (
              <span className="block truncate text-xs text-muted-foreground">{contact.emails[0].value}</span>
            )}
          </span>
        </span>
      )}

      {isContactsColumnVisible(visibleColumns, "email") && (
        <span className="truncate text-foreground">{contact.emails[0]?.value || ""}</span>
      )}

      {isContactsColumnVisible(visibleColumns, "phone") && (
        <span className="truncate text-foreground">{contact.phones[0]?.value || ""}</span>
      )}

      {isContactsColumnVisible(visibleColumns, "job") && (
        <span className="truncate text-foreground">
          {[contact.jobTitle, contact.company].filter(Boolean).join(", ")}
        </span>
      )}

      {isContactsColumnVisible(visibleColumns, "labels") && (
        <span className="flex flex-wrap gap-1">
          {contact.labels?.map((labelId) => {
            const row = labelRows.find((l) => l.id === labelId)
            return row ? (
              <span
                key={labelId}
                className="inline-flex rounded border border-border px-1.5 py-0.5 text-[11px] text-foreground"
              >
                {row.label}
              </span>
            ) : null
          })}
        </span>
      )}
    </div>
  )
}