"use client";

import { useCallback, useEffect, useState } from "react";
import { Button, Card } from "@/components/ui";
import {
  Loader2,
  Target,
  ShieldCheck,
  Activity,
  Check,
  X,
  CircleDot,
  Send,
} from "lucide-react";

type Approval = { id: number; employee: string; action: string; summary: string; amount: number | null; currency: string; risk: string; requested_at: string };
type Event = { id: number; employee: string; kind: string; summary: string; created_at: string };
type Assignment = { employee: string; title: string; delivered: boolean; error?: string };

const KIND_COLOR: Record<string, string> = {
  action: "text-emerald-500",
  message: "text-blue-500",
  task: "text-purple-500",
  approval: "text-amber-500",
  goal: "text-brand",
  system: "text-slate-400",
};

function timeAgo(iso: string): string {
  const s = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
  if (s < 60) return "الآن";
  if (s < 3600) return `منذ ${Math.floor(s / 60)} د`;
  if (s < 86400) return `منذ ${Math.floor(s / 3600)} س`;
  return `منذ ${Math.floor(s / 86400)} يوم`;
}

export function CompanyGovernance() {
  const [goal, setGoal] = useState("");
  const [delegating, setDelegating] = useState(false);
  const [plan, setPlan] = useState<Assignment[] | null>(null);
  const [goalError, setGoalError] = useState("");

  const [approvals, setApprovals] = useState<Approval[]>([]);
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    const [a, e] = await Promise.all([
      fetch("/api/company/approvals").then((r) => r.json()).catch(() => ({ approvals: [] })),
      fetch("/api/company/activity").then((r) => r.json()).catch(() => ({ events: [] })),
    ]);
    setApprovals(a.approvals || []);
    setEvents(e.events || []);
    setLoading(false);
  }, []);

  useEffect(() => {
    load();
    const t = setInterval(load, 15000); // keep the inbox fresh
    return () => clearInterval(t);
  }, [load]);

  async function delegate() {
    setDelegating(true);
    setGoalError("");
    setPlan(null);
    const res = await fetch("/api/company/goal", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ goal }),
    });
    const b = await res.json().catch(() => ({}));
    setDelegating(false);
    if (!res.ok) {
      setGoalError(b.error || "تعذّر توزيع الهدف.");
      return;
    }
    setPlan(b.assignments || []);
    setGoal("");
    load();
  }

  async function decide(id: number, decision: "approve" | "reject") {
    setApprovals((prev) => prev.filter((a) => a.id !== id)); // optimistic
    await fetch(`/api/company/approvals/${id}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ decision }),
    });
    load();
  }

  return (
    <div className="grid gap-6 lg:grid-cols-2">
      {/* Company goal → delegate */}
      <Card className="lg:col-span-2">
        <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-ink">
          <Target size={18} className="text-brand" /> هدف الشركة — وزّعه على الفريق
        </div>
        <p className="mb-3 text-sm text-slate-500">
          اكتب هدفاً، والمنسّق يفكّكه إلى مهام ويوزّعها تلقائياً على الموظف المناسب.
        </p>
        <div className="flex flex-col gap-2 sm:flex-row">
          <input
            value={goal}
            onChange={(e) => setGoal(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && goal.trim() && delegate()}
            placeholder="مثال: جهّز إقفال حسابات آخر الشهر وتابع الفواتير المتأخرة وابدأ حملة متابعة العملاء"
            className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none"
          />
          <Button onClick={delegate} disabled={delegating || !goal.trim()}>
            {delegating ? <Loader2 size={15} className="animate-spin" /> : <Send size={15} />}
            {delegating ? "يوزّع…" : "وزّع الهدف"}
          </Button>
        </div>
        {goalError && <p className="mt-2 rounded-md bg-red-50 px-3 py-2 text-xs text-red-700">{goalError}</p>}
        {plan && (
          <div className="mt-3 grid gap-2">
            {plan.length === 0 && <p className="text-sm text-slate-400">لم يُنشأ أي تكليف.</p>}
            {plan.map((a, i) => (
              <div key={i} className="flex items-center gap-2 rounded-md border border-slate-200 px-3 py-2 text-sm">
                <Check size={14} className={a.delivered ? "text-emerald-500" : "text-red-400"} />
                <span className="font-semibold text-ink">{a.employee}</span>
                <span className="text-slate-500">— {a.title}</span>
              </div>
            ))}
          </div>
        )}
      </Card>

      {/* Approvals inbox */}
      <Card>
        <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-ink">
          <ShieldCheck size={18} className="text-amber-500" /> موافقات بانتظارك
          {approvals.length > 0 && (
            <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-700">{approvals.length}</span>
          )}
        </div>
        {loading ? (
          <div className="flex items-center gap-2 py-6 text-sm text-slate-500"><Loader2 size={16} className="animate-spin" /> جاري التحميل…</div>
        ) : approvals.length === 0 ? (
          <p className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">لا موافقات معلّقة.</p>
        ) : (
          <div className="grid gap-2">
            {approvals.map((a) => (
              <div key={a.id} className="rounded-lg border border-amber-200 bg-amber-50/50 p-3">
                <div className="flex items-start justify-between gap-2">
                  <div className="min-w-0">
                    <p className="text-sm font-semibold text-ink">{a.summary}</p>
                    <p className="mt-0.5 text-xs text-slate-500">
                      {a.employee}
                      {a.amount != null && <> · {a.amount.toLocaleString()} {a.currency}</>}
                      {" · "}{timeAgo(a.requested_at)}
                    </p>
                  </div>
                  <div className="flex shrink-0 gap-1">
                    <button onClick={() => decide(a.id, "approve")} className="rounded-md bg-emerald-500 p-1.5 text-white hover:bg-emerald-600" title="موافقة">
                      <Check size={15} />
                    </button>
                    <button onClick={() => decide(a.id, "reject")} className="rounded-md bg-red-500 p-1.5 text-white hover:bg-red-600" title="رفض">
                      <X size={15} />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </Card>

      {/* Activity timeline */}
      <Card>
        <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-ink">
          <Activity size={18} className="text-emerald-500" /> سجل النشاط
        </div>
        {loading ? (
          <div className="flex items-center gap-2 py-6 text-sm text-slate-500"><Loader2 size={16} className="animate-spin" /> جاري التحميل…</div>
        ) : events.length === 0 ? (
          <p className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">لا نشاط بعد.</p>
        ) : (
          <div className="max-h-80 overflow-y-auto">
            <ul className="grid gap-2">
              {events.map((e) => (
                <li key={e.id} className="flex items-start gap-2 text-sm">
                  <CircleDot size={13} className={`mt-1 shrink-0 ${KIND_COLOR[e.kind] || "text-slate-400"}`} />
                  <span className="min-w-0">
                    <span className="text-ink">{e.summary}</span>
                    <span className="block text-[11px] text-slate-400">{e.employee} · {timeAgo(e.created_at)}</span>
                  </span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </Card>
    </div>
  );
}