"use client"

import { MoreVertical, RotateCcw, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useContactsStore } from "@/lib/contacts/contacts-store"
import { fullContactDisplayName } from "@/lib/contacts/types"
import { avatarColor, senderInitial } from "@/lib/sender-display"

export function TrashView() {
  const { deletedContacts, restoreContact, emptyTrash } = useContactsStore()

  function formatDate(ts: number): string {
    return new Date(ts).toLocaleDateString("fr-FR", {
      day: "numeric",
      month: "short",
    })
  }

  return (
    <div className="px-6 py-4">
      {/* Warning banner */}
      {deletedContacts.length > 0 && (
        <div className="mb-4 flex items-center justify-between rounded-lg bg-[#fef7e0] px-4 py-3">
          <p className="text-sm text-[#3c4043]">
            Les contacts qui sont dans la corbeille depuis plus de 30 jours seront supprimés définitivement
          </p>
          <button
            type="button"
            onClick={emptyTrash}
            className="shrink-0 text-sm font-medium text-[#1a73e8] hover:text-[#1557b0]"
          >
            Vider la corbeille
          </button>
        </div>
      )}

      {/* Title */}
      <h1 className="mb-4 text-2xl font-normal text-[#1f1f1f]">
        Corbeille ({deletedContacts.length})
      </h1>

      {deletedContacts.length === 0 && (
        <p className="py-12 text-center text-sm text-[#5f6368]">
          La corbeille est vide
        </p>
      )}

      {deletedContacts.length > 0 && (
        <>
          {/* Table header */}
          <div className="grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)_40px] gap-2 border-b border-gray-200 py-2 text-xs font-medium text-[#5f6368]">
            <span>Nom</span>
            <span>Raison du placement dans la corbeille</span>
            <span>Date de suppression</span>
            <span />
          </div>

          {/* Rows */}
          {deletedContacts.map((entry) => {
            const { contact, deletedAt, reason } = entry
            const displayName = fullContactDisplayName(contact)
            const name = displayName || contact.emails[0]?.value || "?"
            const color = avatarColor(name)
            const initial = senderInitial(name)

            return (
              <div
                key={contact.id}
                className="grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)_40px] items-center gap-2 border-b border-gray-100 py-3 text-sm"
              >
                <span className="flex items-center gap-3">
                  {contact.avatarUrl ? (
                    <img src={contact.avatarUrl} alt={name} className="h-8 w-8 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="truncate text-[#1f1f1f]">{name}</span>
                </span>
                <span className="truncate text-[#5f6368]">{reason}</span>
                <span className="text-[#5f6368]">{formatDate(deletedAt)}</span>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full text-[#5f6368]">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem onClick={() => restoreContact(contact.id)}>
                      <RotateCcw className="mr-2 h-4 w-4" />
                      Restaurer
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={() => useContactsStore.getState().deleteContact(contact.id)}
                      className="text-red-600 focus:text-red-600"
                    >
                      <Trash2 className="mr-2 h-4 w-4" />
                      Supprimer définitivement
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            )
          })}
        </>
      )}
    </div>
  )
}