"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { Button, Card, Label } from "@/components/ui";
import {
  Loader2,
  Plus,
  Trash2,
  CalendarClock,
  KanbanSquare,
  CheckCircle2,
  CircleDashed,
  PauseCircle,
  PlayCircle,
  UserPlus,
  Crown,
  Wallet,
  Save,
} from "lucide-react";

export type Employee = {
  id: number;
  name: string;
  status: string;
  subdomain: string;
  deployment_mode: string;
  role_name: string | null;
  role_name_ar: string | null;
  role_icon: string | null;
  notes: string | null;
};

type Duty = { id: string; name: string; prompt: string; schedule: string; deliver: string | null; enabled: boolean; next_run?: string | null };
type Task = { id: number | string; title: string; status: string; assignee?: string | null; created_at?: string };

const SCHEDULE_PRESETS = [
  { label: "كل يوم 9 صباحاً", value: "0 9 * * *" },
  { label: "كل يوم 6 مساءً", value: "0 18 * * *" },
  { label: "كل أحد 9 صباحاً (أسبوعي)", value: "0 9 * * 0" },
  { label: "كل ساعة", value: "every 1h" },
];

const DELIVER_OPTIONS = [
  { label: "Telegram", value: "telegram" },
  { label: "WhatsApp", value: "whatsapp_cloud" },
  { label: "Slack", value: "slack" },
  { label: "Discord", value: "discord" },
  { label: "Email", value: "email" },
];

const STATUS_LABEL: Record<string, { label: string; cls: string }> = {
  todo: { label: "قيد الانتظار", cls: "bg-slate-100 text-slate-600" },
  ready: { label: "جاهزة", cls: "bg-blue-50 text-blue-700" },
  running: { label: "قيد التنفيذ", cls: "bg-amber-50 text-amber-700" },
  review: { label: "مراجعة", cls: "bg-purple-50 text-purple-700" },
  done: { label: "منجزة ✓", cls: "bg-emerald-50 text-emerald-700" },
  blocked: { label: "معلّقة", cls: "bg-red-50 text-red-600" },
  scheduled: { label: "مجدولة", cls: "bg-slate-100 text-slate-600" },
  triage: { label: "فرز", cls: "bg-slate-100 text-slate-600" },
};

export function CompanyView({ employees }: { employees: Employee[] }) {
  const running = employees.filter((e) => e.status === "RUNNING");
  const [selected, setSelected] = useState<number | null>(running[0]?.id ?? null);

  return (
    <div className="space-y-6">
      {/* Org chart */}
      <div>
        <div className="mb-3 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
          <Crown size={14} /> فريق شركتك
        </div>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {employees.map((e) => {
            const isImg = e.role_icon && (e.role_icon.startsWith("/") || e.role_icon.startsWith("http"));
            const active = selected === e.id;
            return (
              <button
                key={e.id}
                onClick={() => setSelected(e.id)}
                className={`flex items-center gap-3 rounded-xl border p-4 text-right transition ${
                  active ? "border-brand bg-brand/5 ring-1 ring-brand" : "border-slate-200 bg-white hover:border-slate-300"
                }`}
              >
                {isImg ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={e.role_icon!} alt="" className="h-14 w-14 shrink-0 rounded-lg object-cover" />
                ) : (
                  <span className="flex h-14 w-14 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-2xl">
                    {e.role_icon || "🤖"}
                  </span>
                )}
                <span className="min-w-0">
                  <span className="block truncate font-bold text-ink">{e.name}</span>
                  <span className="block text-xs text-slate-500">{e.role_name_ar || e.role_name || "وكيل عام"}</span>
                  <span
                    className={`mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-semibold ${
                      e.status === "RUNNING" ? "bg-emerald-50 text-emerald-700" : e.status === "ERROR" ? "bg-red-50 text-red-600" : "bg-amber-50 text-amber-700"
                    }`}
                  >
                    {e.status === "RUNNING" ? "يعمل الآن" : e.status === "ERROR" ? "خطأ" : "جاري الإنشاء"}
                  </span>
                </span>
              </button>
            );
          })}
          <Link
            href="/dashboard/instances"
            className="flex min-h-[92px] items-center justify-center gap-2 rounded-xl border-2 border-dashed border-slate-300 p-4 text-sm font-semibold text-slate-500 transition hover:border-brand hover:text-brand"
          >
            <UserPlus size={18} /> وظّف موظفاً جديداً
          </Link>
        </div>
      </div>

      {/* Selected employee workspace */}
      {selected !== null && employees.find((e) => e.id === selected)?.status === "RUNNING" && (
        <EmployeeWorkspace key={selected} employee={employees.find((e) => e.id === selected)!} />
      )}
    </div>
  );
}

function EmployeeWorkspace({ employee }: { employee: Employee }) {
  const [tab, setTab] = useState<"duties" | "tasks" | "budget">("duties");
  return (
    <Card>
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-lg font-bold text-ink">
          مساحة عمل: {employee.name}
          <span className="mr-2 text-sm font-normal text-slate-400">({employee.role_name_ar || employee.role_name || "وكيل"})</span>
        </h2>
        <div className="flex gap-1 rounded-lg bg-slate-100 p-1">
          <button
            onClick={() => setTab("duties")}
            className={`flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium ${tab === "duties" ? "bg-white text-ink shadow-sm" : "text-slate-500"}`}
          >
            <CalendarClock size={15} /> مهام دورية
          </button>
          <button
            onClick={() => setTab("tasks")}
            className={`flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium ${tab === "tasks" ? "bg-white text-ink shadow-sm" : "text-slate-500"}`}
          >
            <KanbanSquare size={15} /> لوحة المهام
          </button>
          <button
            onClick={() => setTab("budget")}
            className={`flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium ${tab === "budget" ? "bg-white text-ink shadow-sm" : "text-slate-500"}`}
          >
            <Wallet size={15} /> الميزانية
          </button>
        </div>
      </div>
      {tab === "duties" ? <DutiesPanel instanceId={employee.id} /> : tab === "tasks" ? <TasksPanel instanceId={employee.id} /> : <BudgetPanel instanceId={employee.id} />}
    </Card>
  );
}

function BudgetPanel({ instanceId }: { instanceId: number }) {
  const [limit, setLimit] = useState(0);
  const [used, setUsed] = useState(0);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState("");

  const load = useCallback(async () => {
    const res = await fetch(`/api/instances/${instanceId}/budget`);
    const b = await res.json().catch(() => ({}));
    setLimit(b.limit ?? 0);
    setUsed(b.used ?? 0);
    setLoading(false);
  }, [instanceId]);

  useEffect(() => {
    load();
  }, [load]);

  async function save() {
    setSaving(true);
    setMsg("");
    const res = await fetch(`/api/instances/${instanceId}/budget`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ monthly_action_limit: limit }),
    });
    setSaving(false);
    setMsg(res.ok ? "تم الحفظ." : "فشل الحفظ.");
    load();
  }

  if (loading)
    return (
      <div className="flex items-center gap-2 py-6 text-sm text-slate-500">
        <Loader2 size={16} className="animate-spin" /> جاري التحميل…
      </div>
    );

  const pct = limit > 0 ? Math.min(100, Math.round((used / limit) * 100)) : 0;

  return (
    <div className="grid gap-4">
      <p className="text-sm text-slate-500">
        سقف شهري لعدد الأفعال (المهام/الإجراءات) لهذا الموظف — يمنع التكاليف الجامحة. <strong>0 = بلا حدود</strong>.
      </p>
      <div className="rounded-lg border border-slate-200 p-4">
        <div className="mb-2 flex items-center justify-between text-sm">
          <span className="text-slate-500">الاستهلاك هذا الشهر</span>
          <span className="font-semibold text-ink">{used}{limit > 0 ? ` / ${limit}` : ""}</span>
        </div>
        {limit > 0 && (
          <div className="h-2 w-full overflow-hidden rounded-full bg-slate-100">
            <div className={`h-full ${pct >= 100 ? "bg-red-500" : pct >= 80 ? "bg-amber-500" : "bg-emerald-500"}`} style={{ width: `${pct}%` }} />
          </div>
        )}
      </div>
      <div className="flex items-end gap-3">
        <div>
          <Label htmlFor="lim">السقف الشهري</Label>
          <input
            id="lim"
            type="number"
            min={0}
            value={limit}
            onChange={(e) => setLimit(parseInt(e.target.value) || 0)}
            className="mt-1 w-32 rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none"
          />
        </div>
        <Button onClick={save} disabled={saving}>
          {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />} حفظ
        </Button>
        {msg && <span className="text-xs text-slate-500">{msg}</span>}
      </div>
    </div>
  );
}

function DutiesPanel({ instanceId }: { instanceId: number }) {
  const [duties, setDuties] = useState<Duty[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [name, setName] = useState("");
  const [prompt, setPrompt] = useState("");
  const [schedule, setSchedule] = useState(SCHEDULE_PRESETS[0].value);
  const [deliver, setDeliver] = useState("telegram");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  const load = useCallback(async () => {
    const res = await fetch(`/api/instances/${instanceId}/duties`);
    const b = await res.json().catch(() => ({}));
    setDuties(b.duties || []);
    setLoading(false);
  }, [instanceId]);

  useEffect(() => {
    load();
  }, [load]);

  async function create() {
    setSaving(true);
    setError("");
    const res = await fetch(`/api/instances/${instanceId}/duties`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, prompt, schedule, deliver }),
    });
    const b = await res.json().catch(() => ({}));
    setSaving(false);
    if (!res.ok) {
      setError(b.error || "فشل إنشاء المهمة.");
      return;
    }
    setShowForm(false);
    setName("");
    setPrompt("");
    load();
  }

  async function remove(id: string) {
    await fetch(`/api/instances/${instanceId}/duties?id=${encodeURIComponent(id)}`, { method: "DELETE" });
    load();
  }

  async function toggle(id: string, enabled: boolean) {
    await fetch(`/api/instances/${instanceId}/duties`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id, enabled }),
    });
    load();
  }

  if (loading)
    return (
      <div className="flex items-center gap-2 py-6 text-sm text-slate-500">
        <Loader2 size={16} className="animate-spin" /> جاري التحميل…
      </div>
    );

  return (
    <div className="grid gap-3">
      <p className="text-sm text-slate-500">
        المهام الدورية تجعل موظفك يعمل من تلقاء نفسه — تقرير يومي، متابعة أسبوعية… وتصلك النتيجة على قناتك.
      </p>

      {duties.map((d) => (
        <div key={d.id} className="flex items-start justify-between rounded-lg border border-slate-200 p-3">
          <div className="min-w-0">
            <p className="font-semibold text-ink">
              {d.name}
              {!d.enabled && <span className="mr-2 rounded bg-slate-100 px-2 py-0.5 text-[10px] text-slate-500">موقوفة</span>}
            </p>
            <p className="mt-0.5 line-clamp-2 text-xs text-slate-500">{d.prompt}</p>
            <p className="mt-1 text-[11px] text-slate-400">
              الجدولة: <code>{d.schedule}</code>
              {d.deliver && <> · التسليم: {d.deliver}</>}
            </p>
          </div>
          <div className="flex shrink-0 gap-2">
            <button onClick={() => toggle(d.id, !d.enabled)} className="text-slate-400 hover:text-brand" title={d.enabled ? "إيقاف" : "تشغيل"}>
              {d.enabled ? <PauseCircle size={17} /> : <PlayCircle size={17} />}
            </button>
            <button onClick={() => remove(d.id)} className="text-slate-400 hover:text-red-600" title="حذف">
              <Trash2 size={16} />
            </button>
          </div>
        </div>
      ))}

      {duties.length === 0 && !showForm && <p className="rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-400">لا مهام دورية بعد.</p>}

      {showForm ? (
        <div className="grid gap-3 rounded-lg border border-slate-200 bg-slate-50 p-4">
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="اسم المهمة (مثال: تقرير المبيعات اليومي)"
            className="rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none"
          />
          <textarea
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            rows={3}
            placeholder="ماذا يفعل الموظف؟ (مثال: راجع مبيعات اليوم في Odoo وأرسل لي ملخصاً بالأرقام)"
            className="rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none"
          />
          <div className="grid gap-3 sm:grid-cols-2">
            <select value={schedule} onChange={(e) => setSchedule(e.target.value)} className="rounded-md border border-slate-300 px-3 py-2 text-sm">
              {SCHEDULE_PRESETS.map((p) => (
                <option key={p.value} value={p.value}>
                  {p.label}
                </option>
              ))}
            </select>
            <select value={deliver} onChange={(e) => setDeliver(e.target.value)} className="rounded-md border border-slate-300 px-3 py-2 text-sm">
              {DELIVER_OPTIONS.map((o) => (
                <option key={o.value} value={o.value}>
                  يصلني على {o.label}
                </option>
              ))}
            </select>
          </div>
          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-xs text-red-700">{error}</p>}
          <div className="flex gap-2">
            <Button onClick={create} disabled={saving || !name || !prompt}>
              {saving ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />} إنشاء
            </Button>
            <button onClick={() => setShowForm(false)} className="text-sm text-slate-500 hover:text-ink">
              إلغاء
            </button>
          </div>
        </div>
      ) : (
        <Button onClick={() => setShowForm(true)} className="w-fit">
          <Plus size={15} /> مهمة دورية جديدة
        </Button>
      )}
    </div>
  );
}

function TasksPanel({ instanceId }: { instanceId: number }) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(true);
  const [title, setTitle] = useState("");
  const [adding, setAdding] = useState(false);

  const load = useCallback(async () => {
    const res = await fetch(`/api/instances/${instanceId}/tasks`);
    const b = await res.json().catch(() => ({}));
    setTasks(b.tasks || []);
    setLoading(false);
  }, [instanceId]);

  useEffect(() => {
    load();
  }, [load]);

  async function add() {
    if (!title.trim()) return;
    setAdding(true);
    await fetch(`/api/instances/${instanceId}/tasks`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title }),
    });
    setTitle("");
    setAdding(false);
    load();
  }

  if (loading)
    return (
      <div className="flex items-center gap-2 py-6 text-sm text-slate-500">
        <Loader2 size={16} className="animate-spin" /> جاري التحميل…
      </div>
    );

  return (
    <div className="grid gap-3">
      <div className="flex gap-2">
        <input
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && add()}
          placeholder="أضف مهمة لموظفك… (مثال: راجع فواتير الأسبوع الماضي)"
          className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none"
        />
        <Button onClick={add} disabled={adding || !title.trim()}>
          {adding ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />}
        </Button>
      </div>

      {tasks.length === 0 ? (
        <p className="rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-400">لوحة المهام فارغة.</p>
      ) : (
        <div className="grid gap-2">
          {tasks.map((t) => {
            const s = STATUS_LABEL[t.status] || { label: t.status, cls: "bg-slate-100 text-slate-600" };
            return (
              <div key={String(t.id)} className="flex items-center justify-between rounded-lg border border-slate-200 px-3 py-2">
                <span className="flex min-w-0 items-center gap-2 text-sm text-ink">
                  {t.status === "done" ? <CheckCircle2 size={15} className="shrink-0 text-emerald-500" /> : <CircleDashed size={15} className="shrink-0 text-slate-400" />}
                  <span className="truncate">{t.title}</span>
                </span>
                <span className={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold ${s.cls}`}>{s.label}</span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}