"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

export function LeadForm() {
  const router = useRouter();
  const [companyId, setCompanyId] = useState("");
  const [personId, setPersonId] = useState("");
  const [serviceInterest, setServiceInterest] = useState("");
  const [status, setStatus] = useState("new");
  const [temperature, setTemperature] = useState("unknown");
  const [priority, setPriority] = useState("medium");
  const [notes, setNotes] = useState("");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string | null>(null);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setMessage(null);
    const res = await fetch("/api/leads", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        companyId: companyId || undefined,
        personId: personId || undefined,
        serviceInterest,
        source: "manual",
        status,
        temperature,
        priority,
        notes,
      }),
    });
    const json = await res.json();
    setLoading(false);
    if (!res.ok) {
      setMessage(json.error ?? "فشل الإنشاء");
      return;
    }
    router.push(`/leads/${json.data._id}`);
  }

  return (
    <form
      onSubmit={(e) => void submit(e)}
      className="space-y-4 rounded-lg border border-neutral-200 bg-white p-5"
    >
      <div>
        <label className="text-sm text-neutral-600">companyId (اختياري)</label>
        <input
          className="mt-1 w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          value={companyId}
          onChange={(e) => setCompanyId(e.target.value)}
        />
      </div>
      <div>
        <label className="text-sm text-neutral-600">personId (اختياري)</label>
        <input
          className="mt-1 w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          value={personId}
          onChange={(e) => setPersonId(e.target.value)}
        />
      </div>
      <div>
        <label className="text-sm text-neutral-600">اهتمام الخدمة</label>
        <input
          className="mt-1 w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          value={serviceInterest}
          onChange={(e) => setServiceInterest(e.target.value)}
        />
      </div>
      <div className="grid gap-3 md:grid-cols-3">
        <div>
          <label className="text-sm text-neutral-600">الحالة</label>
          <select
            className="mt-1 w-full rounded border border-neutral-300 px-3 py-2 text-sm"
            value={status}
            onChange={(e) => setStatus(e.target.value)}
          >
            <option value="new">new</option>
            <option value="contacted">contacted</option>
            <option value="qualified">qualified</option>
          </select>
        </div>
        <div>
          <label className="text-sm text-neutral-600">الحرارة</label>
          <select
            className="mt-1 w-full rounded border border-neutral-300 px-3 py-2 text-sm"
            value={temperature}
            onChange={(e) => setTemperature(e.target.value)}
          >
            <option value="hot">hot</option>
            <option value="warm">warm</option>
            <option value="cold">cold</option>
            <option value="unknown">unknown</option>
          </select>
        </div>
        <div>
          <label className="text-sm text-neutral-600">الأولوية</label>
          <select
            className="mt-1 w-full rounded border border-neutral-300 px-3 py-2 text-sm"
            value={priority}
            onChange={(e) => setPriority(e.target.value)}
          >
            <option value="very_high">very_high</option>
            <option value="high">high</option>
            <option value="medium">medium</option>
            <option value="low">low</option>
          </select>
        </div>
      </div>
      <div>
        <label className="text-sm text-neutral-600">ملاحظات</label>
        <textarea
          className="mt-1 min-h-[100px] w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
        />
      </div>
      {message ? <p className="text-sm text-red-600">{message}</p> : null}
      <button
        type="submit"
        disabled={loading}
        className="rounded bg-[var(--accent)] px-4 py-2 text-sm text-white disabled:opacity-50"
      >
        {loading ? "جاري الحفظ..." : "حفظ Lead"}
      </button>
    </form>
  );
}