"use client"

import { useMemo, useState } from "react"
import { Button } from "@/components/ui/button"
import { useContactsStore } from "@/lib/contacts/contacts-store"
import { fullContactDisplayName } from "@/lib/contacts/types"
import { avatarColor, senderInitial } from "@/lib/sender-display"
import {
  CONTACTS_HEADING_TEXT,
  CONTACTS_MUTED_TEXT,
  CONTACTS_PAGE_CARD_CLASS,
  CONTACTS_PAGE_CARD_INNER_DIVIDER_CLASS,
  CONTACTS_PAGE_LINK_BTN_CLASS,
  CONTACTS_PAGE_SECTION_TITLE_CLASS,
  CONTACTS_PRIMARY_BTN_CLASS,
} from "@/lib/contacts-chrome-classes"
import { cn } from "@/lib/utils"

export function AddCoordinatesView() {
  const { getCoordinateSuggestions, updateContact } = useContactsStore()
  const suggestions = useMemo(() => getCoordinateSuggestions(), [getCoordinateSuggestions])
  const [dismissed, setDismissed] = useState<Set<string>>(new Set())

  const visible = suggestions.filter((s) => !dismissed.has(s.contact.id))

  function handleAdd(contactId: string, field: string, value: string) {
    updateContact(contactId, { [field]: value })
    setDismissed((s) => new Set(s).add(contactId))
  }

  function handleIgnore(contactId: string) {
    setDismissed((s) => new Set(s).add(contactId))
  }

  function handleAddAll() {
    for (const s of visible) {
      updateContact(s.contact.id, { [s.suggestedField]: s.suggestedValue })
    }
    setDismissed(new Set(suggestions.map((s) => s.contact.id)))
  }

  return (
    <div>
      <div className="mb-4 flex items-center justify-between">
        <h3 className={CONTACTS_PAGE_SECTION_TITLE_CLASS}>
          Ajouter des coordonnées ({visible.length})
        </h3>
        {visible.length > 0 && (
          <Button onClick={handleAddAll} className={CONTACTS_PRIMARY_BTN_CLASS}>
            Ajouter tous les détails
          </Button>
        )}
      </div>

      {visible.length === 0 && (
        <p className={cn("py-8 text-center text-sm", CONTACTS_MUTED_TEXT)}>
          Aucune suggestion disponible
        </p>
      )}

      <div className="space-y-4">
        {visible.map((suggestion) => {
          const { contact, suggestedField, suggestedValue } = suggestion
          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={CONTACTS_PAGE_CARD_CLASS}>
              <p className={cn("mb-2 text-xs font-medium", CONTACTS_MUTED_TEXT)}>Contact à modifier</p>
              <div className="flex items-start gap-3">
                {contact.avatarUrl ? (
                  <img src={contact.avatarUrl} alt={name} className="h-10 w-10 rounded-full object-cover" />
                ) : (
                  <div
                    className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-medium text-white"
                    style={{ backgroundColor: color }}
                  >
                    {initial}
                  </div>
                )}
                <div className="min-w-0">
                  <p className={cn("truncate text-sm font-medium", CONTACTS_HEADING_TEXT)}>{name}</p>
                  {contact.emails[0] && (
                    <p className={cn("truncate text-xs", CONTACTS_MUTED_TEXT)}>{contact.emails[0].value}</p>
                  )}
                  {contact.phones[0] && (
                    <p className={cn("truncate text-xs", CONTACTS_MUTED_TEXT)}>
                      {contact.phones[0].value} ({contact.phones[0].label})
                    </p>
                  )}
                </div>
              </div>

              <div className={CONTACTS_PAGE_CARD_INNER_DIVIDER_CLASS}>
                <p className={cn("text-xs font-medium", CONTACTS_MUTED_TEXT)}>Détails à ajouter</p>
                <p className={cn("mt-1 text-sm", CONTACTS_HEADING_TEXT)}>{suggestedValue}</p>
              </div>

              <div className="mt-4 flex items-center justify-end gap-3">
                <button type="button" onClick={() => handleIgnore(contact.id)} className={CONTACTS_PAGE_LINK_BTN_CLASS}>
                  Ignorer
                </button>
                <Button
                  onClick={() => handleAdd(contact.id, suggestedField, suggestedValue)}
                  className={CONTACTS_PRIMARY_BTN_CLASS}
                >
                  Ajouter
                </Button>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
