"use client"

import { useMemo, useState } from "react"
import { Button } from "@/components/ui/button"
import { useContactsStore, type MergeSuggestion } from "@/lib/contacts/contacts-store"
import { findDuplicatePairs, type DuplicateMatchReason } from "@/lib/contacts/duplicate-detection"
import { fullContactDisplayName } from "@/lib/contacts/types"
import { avatarColor, senderInitial } from "@/lib/sender-display"
import { AddCoordinatesView } from "./add-coordinates-view"

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 = useContactsStore((s) => s.contacts)
  const ignoredMergePairs = useContactsStore((s) => s.ignoredMergePairs)
  const mergeContacts = useContactsStore((s) => s.mergeContacts)
  const ignoreMergePair = useContactsStore((s) => s.ignoreMergePair)
  const getCoordinateSuggestions = useContactsStore((s) => s.getCoordinateSuggestions)

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

  const coordSuggestions = useMemo(
    () => getCoordinateSuggestions(),
    [getCoordinateSuggestions, contacts]
  )

  const [mergingAll, setMergingAll] = useState(false)

  function handleMerge(suggestion: MergeSuggestion) {
    mergeContacts(suggestion.contactA.id, suggestion.contactB.id)
  }

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

  function handleMergeAll() {
    setMergingAll(true)
    try {
      let pairs = findDuplicatePairs(
        useContactsStore.getState().contacts,
        new Set(useContactsStore.getState().ignoredMergePairs)
      )
      while (pairs.length > 0) {
        const { contactA, contactB } = pairs[0]
        mergeContacts(contactA.id, contactB.id)
        const state = useContactsStore.getState()
        pairs = findDuplicatePairs(state.contacts, new Set(state.ignoredMergePairs))
      }
    } finally {
      setMergingAll(false)
    }
  }

  return (
    <div className="px-6 py-6">
      <div className="mb-6 flex items-start gap-4 rounded-xl bg-[#f0f4f9] p-5">
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[#d3e3fd]">
          <span className="text-2xl">🧹</span>
        </div>
        <div>
          <h2 className="text-base font-medium text-[#1f1f1f]">
            Des méthodes simples pour nettoyer vos contacts
          </h2>
          <p className="mt-1 text-sm text-[#5f6368]">
            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={`rounded-full px-4 py-2 text-sm font-medium transition-colors ${
            subView === "merge"
              ? "bg-[#c2e7ff] text-[#001d35]"
              : "bg-[#f0f4f9] text-[#1f1f1f] hover:bg-[#e3e8ed]"
          }`}
        >
          Fusionner les doublons
          {mergeSuggestions.length > 0 && (
            <span className="ml-2 text-xs">({mergeSuggestions.length})</span>
          )}
        </button>
        <button
          type="button"
          onClick={() => setSubView("coordinates")}
          className={`rounded-full px-4 py-2 text-sm font-medium transition-colors ${
            subView === "coordinates"
              ? "bg-[#c2e7ff] text-[#001d35]"
              : "bg-[#f0f4f9] text-[#1f1f1f] hover:bg-[#e3e8ed]"
          }`}
        >
          Ajouter des coordonnées
          {coordSuggestions.length > 0 && (
            <span className="ml-2 text-xs">({coordSuggestions.length})</span>
          )}
        </button>
      </div>

      {subView === "merge" && (
        <div>
          <div className="mb-4 flex items-center justify-between">
            <h3 className="text-lg font-normal text-[#1f1f1f]">
              Fusionner les doublons ({mergeSuggestions.length})
            </h3>
            {mergeSuggestions.length > 0 && (
              <Button
                onClick={handleMergeAll}
                disabled={mergingAll}
                className="rounded-full bg-[#1a73e8] px-5 text-sm font-medium text-white hover:bg-[#1557b0]"
              >
                {mergingAll ? "Fusion…" : "Tout fusionner"}
              </Button>
            )}
          </div>

          {mergeSuggestions.length === 0 && (
            <p className="py-8 text-center text-sm text-[#5f6368]">
              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="rounded-xl border border-gray-200 p-5">
      <p className="mb-3 text-xs font-medium text-[#5f6368]">
        {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="text-sm font-medium text-[#1a73e8] hover:text-[#1557b0]"
        >
          Ignorer
        </button>
        <Button
          onClick={onMerge}
          className="rounded-full bg-[#1a73e8] px-5 text-sm font-medium text-white hover:bg-[#1557b0]"
        >
          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="truncate text-sm font-medium text-[#1f1f1f]">{name}</p>
        {contact.emails[0] && (
          <p className="truncate text-xs text-[#5f6368]">{contact.emails[0].value}</p>
        )}
        {contact.phones[0] && (
          <p className="truncate text-xs text-[#5f6368]">
            {contact.phones[0].value} ({contact.phones[0].label})
          </p>
        )}
      </div>
    </div>
  )
}