"use client";

import { useState } from "react";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { createClient } from "@/lib/supabase/client";
import { Modal } from "@/components/ui/modal";
import { Button } from "@/components/ui/button";
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("");

  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 (
    <Modal
      open
      onClose={onClose}
      title={isEdit ? "Lead bearbeiten" : "Neuer Lead"}
      className="max-w-lg"
    >
      <form onSubmit={handleSubmit} className="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={cn(inputCls, "text-center")}
            />
          </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>}

        {/* Footer */}
        <div className="flex items-center justify-end gap-2 pt-1">
          <Button type="button" variant="ghost" onClick={onClose}>
            Abbrechen
          </Button>
          <Button type="submit" disabled={saving}>
            {saving && <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />}
            {isEdit ? "Speichern" : "Erstellen"}
          </Button>
        </div>
      </form>
    </Modal>
  );
}

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-sky-400/40 transition-colors";
const selectCls = "w-full rounded-lg border border-white/[0.07] bg-white/[0.03] px-3 py-2 text-[12px] text-white/80 focus:outline-none focus:border-sky-400/40 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>
  );
}