"use client";

import { useState, useEffect } from "react";
import { X, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { createClient } from "@/lib/supabase/client";
import type { Lead, LeadStatus, LeadScore, Profile } from "@/types";
import { LEAD_CATEGORIES, LEAD_SOURCES, LEAD_STATUSES, LEAD_SCORES } from "@/lib/leads-config";

type Props = {
  lead: Lead | null;
  teamId?: string | null;
  teamMembers?: Profile[];
  onClose: () => void;
  onSaved: (lead: Lead) => void;
};

export function LeadFormModal({ lead, teamId, teamMembers = [], onClose, onSaved }: Props) {
  const supabase = createClient();
  const isEdit = !!lead;

  const [form, setForm] = useState({
    name:        lead?.name        ?? "",
    company:     lead?.company     ?? "",
    email:       lead?.email       ?? "",
    phone:       lead?.phone       ?? "",
    category:    lead?.category    ?? "Sonstiges",
    status:      (lead?.status     ?? "neu")  as LeadStatus,
    score:       (lead?.score      ?? "cold") as LeadScore,
    source:      lead?.source      ?? "",
    value:       lead?.value != null ? String(lead.value) : "",
    notes:       lead?.notes       ?? "",
    assigned_to: lead?.assigned_to ?? "",
  });
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    function onKey(e: KeyboardEvent) { if (e.key === "Escape") onClose(); }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  function set<K extends keyof typeof form>(k: K, v: typeof form[K]) {
    setForm((p) => ({ ...p, [k]: v }));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!form.name.trim()) { setError("Name ist Pflicht."); return; }
    setSaving(true); setError("");

    const payload = {
      name:        form.name.trim(),
      company:     form.company.trim()     || null,
      email:       form.email.trim()       || null,
      phone:       form.phone.trim()       || null,
      category:    form.category,
      status:      form.status,
      score:       form.score,
      source:      form.source.trim()      || null,
      value:       form.value.trim() ? parseFloat(form.value.replace(",", ".")) || null : null,
      notes:       form.notes.trim()       || null,
      assigned_to: form.assigned_to        || null,
    };

    if (isEdit) {
      const { data, error: err } = await supabase
        .from("leads").update(payload).eq("id", lead!.id).select().single();
      if (err) { setError(err.message); setSaving(false); return; }
      onSaved(data as Lead);
    } else {
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) { setError("Nicht eingeloggt."); setSaving(false); return; }
      const { data, error: err } = await supabase
        .from("leads").insert({ ...payload, user_id: user.id, team_id: teamId ?? null }).select().single();
      if (err) { setError(err.message); setSaving(false); return; }

      // log activity
      await supabase.from("lead_activities").insert({
        lead_id: (data as Lead).id, user_id: user.id,
        type: "created", description: "Lead erstellt",
      });
      onSaved(data as Lead);
    }
    onClose();
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
      <form
        onSubmit={handleSubmit}
        className="relative z-10 w-full max-w-lg rounded-2xl border border-white/[0.08] bg-[#0d0d12] shadow-2xl shadow-black/60 overflow-hidden"
      >
        {/* Header */}
        <div className="flex items-center justify-between border-b border-white/[0.05] px-5 py-4">
          <h2 className="text-[14px] font-semibold text-white">{isEdit ? "Lead bearbeiten" : "Neuer Lead"}</h2>
          <button type="button" onClick={onClose} className="rounded-md p-1 text-white/30 hover:text-white/70 transition-colors">
            <X className="h-4 w-4" />
          </button>
        </div>

        {/* Body */}
        <div className="max-h-[70vh] overflow-y-auto px-5 py-4 space-y-4">
          {/* Name + Firma */}
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <Field label="Name *">
              <input value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="Max Mustermann" className={inputCls} />
            </Field>
            <Field label="Firma">
              <input value={form.company} onChange={(e) => set("company", e.target.value)} placeholder="Mustermann GmbH" className={inputCls} />
            </Field>
          </div>

          {/* Kontakt */}
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <Field label="E-Mail">
              <input type="email" value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="max@beispiel.de" className={inputCls} />
            </Field>
            <Field label="Telefon">
              <input value={form.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+49 …" className={inputCls} />
            </Field>
          </div>

          {/* Kategorie + Quelle */}
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <Field label="Kategorie">
              <select value={form.category} onChange={(e) => set("category", e.target.value)} className={selectCls}>
                {LEAD_CATEGORIES.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </Field>
            <Field label="Quelle">
              <select value={form.source} onChange={(e) => set("source", e.target.value)} className={selectCls}>
                <option value="">Keine Angabe</option>
                {LEAD_SOURCES.map((s) => <option key={s} value={s}>{s}</option>)}
              </select>
            </Field>
          </div>

          {/* Status + Score + Wert */}
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            <Field label="Status">
              <select value={form.status} onChange={(e) => set("status", e.target.value as LeadStatus)} className={selectCls}>
                {LEAD_STATUSES.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}
              </select>
            </Field>
            <Field label="Temperatur">
              <select value={form.score} onChange={(e) => set("score", e.target.value as LeadScore)} className={selectCls}>
                {LEAD_SCORES.map((s) => <option key={s.value} value={s.value}>{s.emoji} {s.label}</option>)}
              </select>
            </Field>
            <Field label="Wert (€)">
              <input
                value={form.value}
                onChange={(e) => set("value", e.target.value)}
                placeholder="5000"
                className={inputCls}
              />
            </Field>
          </div>

          {/* Assigned to — only in team context */}
          {teamMembers.length > 0 && (
            <Field label="Zugewiesen an">
              <select value={form.assigned_to} onChange={(e) => set("assigned_to", e.target.value)} className={selectCls}>
                <option value="">Niemanden zuweisen</option>
                {teamMembers.map((m) => (
                  <option key={m.id} value={m.id}>{m.full_name || m.email}</option>
                ))}
              </select>
            </Field>
          )}

          {/* Notizen */}
          <Field label="Notizen">
            <textarea
              value={form.notes}
              onChange={(e) => set("notes", e.target.value)}
              rows={3}
              placeholder="Erste Eindrücke, Anforderungen, nächste Schritte…"
              className={cn(inputCls, "resize-none")}
            />
          </Field>

          {error && <p className="text-[12px] text-red-400">{error}</p>}
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-2 border-t border-white/[0.05] px-5 py-3">
          <button type="button" onClick={onClose} className="rounded-lg px-4 py-1.5 text-[12px] text-white/40 hover:text-white/70 transition-colors">
            Abbrechen
          </button>
          <button
            type="submit"
            disabled={saving}
            className="flex items-center gap-1.5 rounded-lg bg-indigo-500 px-4 py-1.5 text-[12px] font-medium text-white hover:bg-indigo-400 disabled:opacity-60 transition-all"
          >
            {saving && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
            {isEdit ? "Speichern" : "Erstellen"}
          </button>
        </div>
      </form>
    </div>
  );
}

const inputCls  = "w-full rounded-lg border border-white/[0.07] bg-white/[0.03] px-3 py-2 text-[12px] text-white placeholder:text-white/25 focus:outline-none focus:border-white/20 transition-colors";
const selectCls = "w-full rounded-lg border border-white/[0.07] bg-[#0d0d12] px-3 py-2 text-[12px] text-white/80 focus:outline-none focus:border-white/20 transition-colors";

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="space-y-1">
      <label className="block text-[11px] font-medium text-white/40">{label}</label>
      {children}
    </div>
  );
}