"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { AddToSegmentModal } from "@/components/market/add-to-segment-modal";

type EntityQuickActionsProps = {
  entityType: "company" | "person";
  entityId: string;
  entityLabel: string;
  segmentTargetType: "companies" | "people";
};

export function EntityQuickActions({
  entityType,
  entityId,
  entityLabel,
  segmentTargetType,
}: EntityQuickActionsProps) {
  const router = useRouter();
  const [showLead, setShowLead] = useState(false);
  const [showTask, setShowTask] = useState(false);
  const [showSegment, setShowSegment] = useState(false);
  const [serviceInterest, setServiceInterest] = useState("");
  const [notes, setNotes] = useState("");
  const [taskDueDate, setTaskDueDate] = useState("");
  const [taskPriority, setTaskPriority] = useState("medium");
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState("");

  async function createLead() {
    setLoading("lead");
    setMessage("");
    const body =
      entityType === "company"
        ? { companyId: entityId, source: "manual", serviceInterest, notes }
        : { personId: entityId, source: "manual", serviceInterest, notes };
    const res = await fetch("/api/leads", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
    const json = await res.json();
    setLoading("");
    if (!res.ok) {
      setMessage(json.error ?? "فشل إنشاء العميل المحتمل");
      return;
    }
    setShowLead(false);
    setMessage("تم إنشاء العميل المحتمل");
    router.push(`/leads/${json.data._id}`);
    router.refresh();
  }

  async function createTask() {
    setLoading("task");
    setMessage("");
    const res = await fetch("/api/tasks", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title: `متابعة ${entityLabel}`,
        description: notes || undefined,
        priority: taskPriority,
        dueDate: taskDueDate || undefined,
        relatedEntityType: entityType,
        relatedEntityId: entityId,
      }),
    });
    const json = await res.json();
    setLoading("");
    if (!res.ok) {
      setMessage(json.error ?? "فشل إنشاء المهمة");
      return;
    }
    setShowTask(false);
    setMessage("تم إنشاء المهمة");
    router.refresh();
  }

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap gap-2">
        <button
          type="button"
          onClick={() => setShowSegment(true)}
          className="rounded border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50"
        >
          إضافة لشريحة ثابتة
        </button>
        <button
          type="button"
          onClick={() => setShowLead(true)}
          className="rounded border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50"
        >
          إنشاء عميل محتمل
        </button>
        <button
          type="button"
          onClick={() => setShowTask(true)}
          className="rounded border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-50"
        >
          إنشاء مهمة
        </button>
        <span
          title="قريباً"
          className="cursor-not-allowed rounded border border-dashed border-neutral-300 px-3 py-1.5 text-sm text-neutral-400"
        >
          بدء حملة (قريباً)
        </span>
      </div>

      {message ? <p className="text-sm text-green-700">{message}</p> : null}

      {showLead ? (
        <div className="rounded border border-neutral-200 bg-neutral-50 p-4 text-sm">
          <h3 className="font-medium">عميل محتمل جديد</h3>
          <input
            className="mt-2 w-full rounded border px-2 py-1"
            placeholder="الخدمة المطلوبة"
            value={serviceInterest}
            onChange={(e) => setServiceInterest(e.target.value)}
          />
          <textarea
            className="mt-2 w-full rounded border px-2 py-1"
            placeholder="ملاحظات"
            rows={2}
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
          />
          <div className="mt-2 flex gap-2">
            <button
              type="button"
              disabled={loading !== ""}
              onClick={() => void createLead()}
              className="rounded bg-[var(--accent)] px-3 py-1 text-white disabled:opacity-50"
            >
              حفظ
            </button>
            <button type="button" onClick={() => setShowLead(false)}>
              إلغاء
            </button>
          </div>
        </div>
      ) : null}

      {showTask ? (
        <div className="rounded border border-neutral-200 bg-neutral-50 p-4 text-sm">
          <h3 className="font-medium">مهمة جديدة</h3>
          <input
            type="date"
            className="mt-2 w-full rounded border px-2 py-1"
            value={taskDueDate}
            onChange={(e) => setTaskDueDate(e.target.value)}
          />
          <select
            className="mt-2 w-full rounded border px-2 py-1"
            value={taskPriority}
            onChange={(e) => setTaskPriority(e.target.value)}
          >
            <option value="low">منخفض</option>
            <option value="medium">متوسط</option>
            <option value="high">عالي</option>
            <option value="very_high">عالي جداً</option>
          </select>
          <textarea
            className="mt-2 w-full rounded border px-2 py-1"
            placeholder="وصف / ملاحظات"
            rows={2}
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
          />
          <div className="mt-2 flex gap-2">
            <button
              type="button"
              disabled={loading !== ""}
              onClick={() => void createTask()}
              className="rounded bg-[var(--accent)] px-3 py-1 text-white disabled:opacity-50"
            >
              حفظ
            </button>
            <button type="button" onClick={() => setShowTask(false)}>
              إلغاء
            </button>
          </div>
        </div>
      ) : null}

      {showSegment ? (
        <AddToSegmentModal
          targetType={segmentTargetType}
          selectedIds={[entityId]}
          onClose={() => setShowSegment(false)}
          onSuccess={() => {
            setShowSegment(false);
            setMessage("تمت الإضافة للشريحة");
          }}
        />
      ) : null}

      <p className="text-xs text-neutral-500">
        أو أنشئ شريحة ثابتة من{" "}
        <Link href="/segments/new" className="text-[var(--accent)] hover:underline">
          شريحة جديدة
        </Link>
      </p>
    </div>
  );
}