"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { PageLayout } from "@/components/design-system/page-layout";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";

const STAGES = [
  "new_lead",
  "contacted",
  "interested",
  "meeting",
  "proposal",
  "negotiation",
  "won",
  "lost",
  "postponed",
] as const;

interface OppCard {
  _id: string;
  title: string;
  stage: string;
  probability?: number;
  service?: string;
  companyId?: { nameAr?: string };
  assignedTo?: { name?: string };
}

export function PipelineBoard({
  initialData,
}: {
  initialData: Record<string, OppCard[]>;
}) {
  const router = useRouter();
  const { locale } = useLocale();
  const [columns, setColumns] = useState(initialData);
  const [loading, setLoading] = useState<string | null>(null);

  async function moveCard(id: string, stage: string) {
    setLoading(id);
    const res = await fetch(`/api/opportunities/${id}/move-stage`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ stage }),
    });
    setLoading(null);
    if (res.ok) {
      const refresh = await fetch("/api/opportunities/pipeline");
      const json = await refresh.json();
      setColumns(json.data ?? columns);
      router.refresh();
    }
  }

  return (
    <PageLayout
      title={locale === "ar" ? "خط المبيعات" : "Pipeline"}
      description={
        locale === "ar"
          ? "تتبع الفرص عبر مراحل الإغلاق"
          : "Track opportunities through closing stages"
      }
      maxWidth={false}
    >
      <div className="flex gap-3 overflow-x-auto pb-4">
        {STAGES.map((stage) => (
          <div
            key={stage}
            className="min-w-[240px] shrink-0 rounded-xl border border-border bg-muted/30 p-3"
          >
            <h2 className="mb-3 text-sm font-bold capitalize text-foreground">{stage}</h2>
            <div className="space-y-2">
              {(columns[stage] ?? []).map((card) => (
                <div
                  key={card._id}
                  className="rounded-xl border border-border bg-card p-3 text-sm shadow-[var(--shadow-sm)]"
                >
                  <Link
                    href={`/opportunities/${card._id}`}
                    className="font-semibold text-primary hover:underline"
                  >
                    {card.title}
                  </Link>
                  <p className="mt-1 text-muted-foreground">
                    {card.companyId?.nameAr ?? "—"} · {card.service ?? "—"}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {card.probability ?? 0}% · {card.assignedTo?.name ?? "—"}
                  </p>
                  <div className="mt-2 flex flex-wrap gap-1">
                    {STAGES.filter((s) => s !== stage).slice(0, 3).map((s) => (
                      <button
                        key={s}
                        type="button"
                        disabled={loading === card._id}
                        onClick={() => void moveCard(card._id, s)}
                        className={cn(
                          "rounded-md border border-border px-2 py-1 text-[10px] hover:bg-primary/10 hover:text-primary",
                          loading === card._id && "opacity-50"
                        )}
                      >
                        → {s}
                      </button>
                    ))}
                  </div>
                </div>
              ))}
              {(columns[stage] ?? []).length === 0 ? (
                <p className="py-4 text-center text-xs text-muted-foreground">—</p>
              ) : null}
            </div>
          </div>
        ))}
      </div>
    </PageLayout>
  );
}