"use client"

import { useEffect, useState } from "react"
import { Plus, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  useLLMSettings,
  useUpdateLLMSettings,
} from "@/lib/api/hooks/use-contact-discovery"
import type { ApiLLMProvider, ApiLLMSettings } from "@/lib/contacts/discovery-types"
import { LLMModelSuggestInput } from "@/components/gmail/settings/automation/llm-model-suggest-input"
import { AutomationTabMasonry } from "@/components/gmail/settings/automation/automation-tab-masonry"
import {
  CONTACTS_MUTED_TEXT,
  CONTACTS_PRIMARY_BTN_CLASS,
} from "@/lib/contacts-chrome-classes"
import { cn } from "@/lib/utils"

function emptyProvider(): ApiLLMProvider {
  return {
    id: crypto.randomUUID(),
    name: "",
    base_url: "https://api.openai.com/v1",
    api_key: "",
    default_model: "gpt-4o-mini",
  }
}

export function LLMProvidersPanel() {
  const { data: remote, isLoading } = useLLMSettings()
  const updateSettings = useUpdateLLMSettings()
  const [draft, setDraft] = useState<ApiLLMSettings>({
    default_provider_id: "",
    providers: [],
  })
  const [saved, setSaved] = useState(false)

  useEffect(() => {
    if (remote) {
      setDraft({
        ...remote,
        providers: remote.providers ?? [],
      })
    }
  }, [remote])

  function updateProvider(index: number, patch: Partial<ApiLLMProvider>) {
    setDraft((prev) => {
      const providers = [...prev.providers]
      providers[index] = { ...providers[index], ...patch }
      return { ...prev, providers }
    })
  }

  function addProvider() {
    const p = emptyProvider()
    setDraft((prev) => ({
      ...prev,
      providers: [...prev.providers, p],
      default_provider_id: prev.default_provider_id || p.id,
    }))
  }

  function removeProvider(index: number) {
    setDraft((prev) => {
      const removed = prev.providers[index]
      const providers = prev.providers.filter((_, i) => i !== index)
      let defaultId = prev.default_provider_id
      if (defaultId === removed?.id) {
        defaultId = providers[0]?.id ?? ""
      }
      return { ...prev, providers, default_provider_id: defaultId }
    })
  }

  async function handleSave() {
    await updateSettings.mutateAsync(draft)
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  if (isLoading) {
    return <p className={cn("text-sm", CONTACTS_MUTED_TEXT)}>Chargement…</p>
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-base font-medium">Fournisseurs LLM</h3>
        <p className={cn("mt-1 text-sm", CONTACTS_MUTED_TEXT)}>
          API OpenAI-compatibles pour l&apos;enrichissement des contacts et le tri par règles.
        </p>
      </div>

      <AutomationTabMasonry columns={2}>
        {draft.providers.map((provider, index) => (
          <div key={provider.id} className="space-y-3 rounded-lg border border-border p-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">{provider.name || `Fournisseur ${index + 1}`}</span>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => removeProvider(index)}
                aria-label="Supprimer"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
            <div className="grid gap-3 sm:grid-cols-2">
              <div>
                <Label className="text-xs">Nom</Label>
                <Input
                  className="mt-1 h-9"
                  value={provider.name}
                  onChange={(e) => updateProvider(index, { name: e.target.value })}
                  placeholder="OpenAI"
                />
              </div>
              <div className="sm:col-span-2">
                <Label className="text-xs">URL de base</Label>
                <Input
                  className="mt-1 h-9"
                  value={provider.base_url}
                  onChange={(e) => updateProvider(index, { base_url: e.target.value })}
                  placeholder="https://api.openai.com/v1"
                />
              </div>
              <div className="sm:col-span-2">
                <Label className="text-xs">Clé API</Label>
                <Input
                  className="mt-1 h-9"
                  type="password"
                  value={provider.api_key ?? ""}
                  onChange={(e) => updateProvider(index, { api_key: e.target.value })}
                  placeholder="sk-…"
                />
              </div>
              <div className="sm:col-span-2">
                <Label className="text-xs">Modèle par défaut</Label>
                <LLMModelSuggestInput
                  className="mt-1"
                  baseUrl={provider.base_url}
                  apiKey={provider.api_key}
                  value={provider.default_model}
                  onChange={(default_model) => updateProvider(index, { default_model })}
                  placeholder="gpt-4o-mini"
                />
              </div>
            </div>
          </div>
        ))}

        <div className="space-y-3 rounded-lg border border-border p-4">
          <h4 className="text-sm font-medium">Découverte de contacts</h4>
          <div className="grid gap-3 sm:grid-cols-2">
            <div>
              <Label className="text-xs">Fournisseur par défaut</Label>
              <Select
                value={draft.default_provider_id}
                onValueChange={(v) => setDraft((p) => ({ ...p, default_provider_id: v }))}
              >
                <SelectTrigger className="mt-1 h-9">
                  <SelectValue placeholder="Choisir…" />
                </SelectTrigger>
                <SelectContent>
                  {draft.providers.map((p) => (
                    <SelectItem key={p.id} value={p.id}>
                      {p.name || p.id}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="text-xs">Modèle pour l&apos;enrichissement</Label>
              <Select
                value={draft.contact_discovery_provider_id ?? draft.default_provider_id}
                onValueChange={(v) =>
                  setDraft((p) => ({ ...p, contact_discovery_provider_id: v }))
                }
              >
                <SelectTrigger className="mt-1 h-9">
                  <SelectValue placeholder="Même que défaut" />
                </SelectTrigger>
                <SelectContent>
                  {draft.providers.map((p) => (
                    <SelectItem key={p.id} value={p.id}>
                      {p.name || p.id}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="sm:col-span-2">
              <Label className="text-xs">Modèle LLM</Label>
              <Input
                className="mt-1 h-9"
                value={draft.contact_discovery_model ?? ""}
                onChange={(e) =>
                  setDraft((p) => ({ ...p, contact_discovery_model: e.target.value }))
                }
                placeholder="Laisser vide pour utiliser le modèle par défaut du fournisseur"
              />
            </div>
          </div>
        </div>
      </AutomationTabMasonry>

      <div className="flex flex-wrap gap-2">
        <Button variant="outline" onClick={addProvider}>
          <Plus className="mr-2 h-4 w-4" />
          Ajouter un fournisseur
        </Button>
        <Button
          onClick={handleSave}
          disabled={updateSettings.isPending}
          className={CONTACTS_PRIMARY_BTN_CLASS}
        >
          {updateSettings.isPending ? "Enregistrement…" : saved ? "Enregistré ✓" : "Enregistrer"}
        </Button>
      </div>
    </div>
  )
}