"use client"

import { useMemo, useState } from "react"
import { Button } from "@/components/ui/button"
import { useContactsStore } from "@/lib/contacts/contacts-store"
import { useContactsList } from "@/lib/contacts/use-contacts-list"
import { useMergeDuplicates } from "@/lib/api/hooks/use-contact-mutations"
import { findDuplicatePairs, type DuplicateMatchReason } from "@/lib/contacts/duplicate-detection"
import { fullContactDisplayName, type MergeSuggestion } from "@/lib/contacts/types"
import { avatarColor, senderInitial } from "@/lib/sender-display"
import { AddCoordinatesView } from "./add-coordinates-view"
import {
  CONTACTS_HEADING_TEXT,
  CONTACTS_MUTED_TEXT,
  CONTACTS_PAGE_CARD_CLASS,
  CONTACTS_PAGE_INFO_BANNER_CLASS,
  CONTACTS_PAGE_INFO_BANNER_ICON_CLASS,
  CONTACTS_PAGE_LINK_BTN_CLASS,
  CONTACTS_PAGE_SECTION_TITLE_CLASS,
  CONTACTS_PAGE_TAB_ACTIVE_CLASS,
  CONTACTS_PAGE_TAB_INACTIVE_CLASS,
  CONTACTS_PRIMARY_BTN_CLASS,
} from "@/lib/contacts-chrome-classes"
import { cn } from "@/lib/utils"

type SubView = "merge" | "coordinates"

const REASON_LABELS: Record<DuplicateMatchReason, string> = {
  email: "Même adresse e-mail",
  phone: "Même numéro de téléphone",
  name: "Nom similaire",
}

export function MergeDuplicatesView() {
  const [subView, setSubView] = useState<SubView>("merge")
  const { contacts } = useContactsList()
  const ignoredMergePairs = useContactsStore((s) => s.ignoredMergePairs)
  const ignoreMergePair = useContactsStore((s) => s.ignoreMergePair)
  const mergeDuplicatesMutation = useMergeDuplicates()

  const mergeSuggestions = useMemo(
    () => findDuplicatePairs(contacts, new Set(ignoredMergePairs)),
    [contacts, ignoredMergePairs]
  )

  const [mergingAll, setMergingAll] = useState(false)

  function handleMerge(_suggestion: MergeSuggestion) {
    mergeDuplicatesMutation.mutate({ bookId: "default" })
  }

  function handleIgnore(suggestion: MergeSuggestion) {
    ignoreMergePair(suggestion.contactA.id, suggestion.contactB.id)
  }

  function handleMergeAll() {
    setMergingAll(true)
    mergeDuplicatesMutation.mutate(
      { bookId: "default" },
      { onSettled: () => setMergingAll(false) },
    )
  }

  return (
    <div className="px-6 py-6 text-foreground">
      <div className={CONTACTS_PAGE_INFO_BANNER_CLASS}>
        <div className={CONTACTS_PAGE_INFO_BANNER_ICON_CLASS}>
          <span className="text-2xl">🧹</span>
        </div>
        <div>
          <h2 className={cn("text-base font-medium", CONTACTS_HEADING_TEXT)}>
            Des méthodes simples pour nettoyer vos contacts
          </h2>
          <p className={cn("mt-1 text-sm", CONTACTS_MUTED_TEXT)}>
            Obtenez de l'aide pour fusionner les contacts en double, ajouter des informations utiles, et bien encore
          </p>
        </div>
      </div>

      <div className="mb-6 flex gap-2">
        <button
          type="button"
          onClick={() => setSubView("merge")}
          className={subView === "merge" ? CONTACTS_PAGE_TAB_ACTIVE_CLASS : CONTACTS_PAGE_TAB_INACTIVE_CLASS}
        >
          Fusionner les doublons
          {mergeSuggestions.length > 0 && (
            <span className="ml-2 text-xs">({mergeSuggestions.length})</span>
          )}
        </button>
        <button
          type="button"
          onClick={() => setSubView("coordinates")}
          className={subView === "coordinates" ? CONTACTS_PAGE_TAB_ACTIVE_CLASS : CONTACTS_PAGE_TAB_INACTIVE_CLASS}
        >
          Ajouter des coordonnées
        </button>
      </div>

      {subView === "merge" && (
        <div>
          <div className="mb-4 flex items-center justify-between">
            <h3 className={CONTACTS_PAGE_SECTION_TITLE_CLASS}>
              Fusionner les doublons ({mergeSuggestions.length})
            </h3>
            {mergeSuggestions.length > 0 && (
              <Button
                onClick={handleMergeAll}
                disabled={mergingAll}
                className={CONTACTS_PRIMARY_BTN_CLASS}
              >
                {mergingAll ? "Fusion…" : "Tout fusionner"}
              </Button>
            )}
          </div>

          {mergeSuggestions.length === 0 && (
            <p className={cn("py-8 text-center text-sm", CONTACTS_MUTED_TEXT)}>
              Aucun doublon détecté
            </p>
          )}

          <div className="space-y-4">
            {mergeSuggestions.map((suggestion) => (
              <MergeSuggestionCard
                key={`${suggestion.contactA.id}:${suggestion.contactB.id}`}
                suggestion={suggestion}
                onMerge={() => handleMerge(suggestion)}
                onIgnore={() => handleIgnore(suggestion)}
              />
            ))}
          </div>
        </div>
      )}

      {subView === "coordinates" && <AddCoordinatesView />}
    </div>
  )
}

function MergeSuggestionCard({
  suggestion,
  onMerge,
  onIgnore,
}: {
  suggestion: MergeSuggestion
  onMerge: () => void
  onIgnore: () => void
}) {
  const { contactA, contactB, reason } = suggestion

  return (
    <div className={CONTACTS_PAGE_CARD_CLASS}>
      <p className={cn("mb-3 text-xs font-medium", CONTACTS_MUTED_TEXT)}>
        {REASON_LABELS[reason]}
      </p>
      <div className="flex items-start gap-6">
        <ContactMiniCard contact={contactA} />
        <ContactMiniCard contact={contactB} />
      </div>
      <div className="mt-4 flex items-center justify-end gap-3">
        <button
          type="button"
          onClick={onIgnore}
          className={CONTACTS_PAGE_LINK_BTN_CLASS}
        >
          Ignorer
        </button>
        <Button onClick={onMerge} className={CONTACTS_PRIMARY_BTN_CLASS}>
          Fusionner
        </Button>
      </div>
    </div>
  )
}

function ContactMiniCard({ contact }: { contact: import("@/lib/contacts/types").FullContact }) {
  const displayName = fullContactDisplayName(contact)
  const name = displayName || contact.emails[0]?.value || "?"
  const color = avatarColor(name)
  const initial = senderInitial(name)

  return (
    <div className="flex flex-1 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>
  )
}