"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ShieldCheckIcon, UsersIcon, XIcon } from "@/components/dashboard-icons";
import {
  formatPoDiff,
  getCustomerPoStatusClass,
  getCustomerPoStatusLabel,
  type CustomerPoRapWorkspace,
} from "@/lib/customer-po-rap-data";
import { formatRupiah } from "@/lib/crm-pages-data";
import { cn } from "@/lib/utils";

type FeedbackState = {
  kind: "success" | "warning" | "error";
  message: string;
};

type BoqFinalStatus = "Approved" | "Final";

function Badge({ label, className }: { label: string; className: string }) {
  return <span className={cn("inline-flex rounded-full px-2.5 py-1 text-xs font-semibold", className)}>{label}</span>;
}

function getBoqFinalStatusClass(status: BoqFinalStatus) {
  switch (status) {
    case "Approved":
      return "bg-amber-100 text-amber-700";
    case "Final":
      return "bg-violet-100 text-violet-700";
  }
}

function getBoqFinalStatusLabel(status: BoqFinalStatus) {
  return status === "Final" ? "BOQ Final" : "Approved";
}

export function CustomerPoWorkspace({ workspace }: { workspace: CustomerPoRapWorkspace }) {
  const router = useRouter();
  const [poNumber, setPoNumber] = useState(workspace.customerPo?.poNumber ?? "");
  const [poDate, setPoDate] = useState(workspace.customerPo?.poDate ?? "");
  const [poValue, setPoValue] = useState(workspace.customerPo ? String(workspace.customerPo.poValue) : "");
  const [fileName, setFileName] = useState(workspace.customerPo?.fileName ?? "");
  const [savedPo, setSavedPo] = useState(workspace.customerPo);
  const [boqStatus, setBoqStatus] = useState<BoqFinalStatus>(workspace.customerPo?.poValue === workspace.boqTotalPrice ? "Final" : "Approved");
  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
  const [showValidationModal, setShowValidationModal] = useState(false);

  const currentPo = savedPo ?? workspace.customerPo;
  const currentStatus = currentPo ? (currentPo.poValue === workspace.boqTotalPrice ? "saved" : "invalid") : "missing";
  const canGenerateRap = Boolean(currentPo && currentPo.poValue === workspace.boqTotalPrice);

  function parseNumeric(value: string) {
    const digits = value.replace(/[^\d]/g, "");
    return digits ? Number(digits) : 0;
  }

  function handleSubmitPo() {
    if (!poNumber.trim()) {
      setFeedback({ kind: "error", message: "Nomor PO wajib diisi." });
      return;
    }

    if (!poDate.trim()) {
      setFeedback({ kind: "error", message: "Tanggal PO wajib diisi." });
      return;
    }

    if (!fileName.trim()) {
      setFeedback({ kind: "error", message: "Dokumen PO wajib diunggah." });
      return;
    }

    const value = parseNumeric(poValue);
    if (value <= 0) {
      setFeedback({ kind: "error", message: "Nilai PO harus lebih besar dari 0." });
      return;
    }

    const nextPo = {
      poNumber: poNumber.trim(),
      poDate,
      poValue: value,
      fileName: fileName.trim(),
      savedAt: new Date("2026-07-14T12:00:00+08:00").toISOString(),
    };

    setSavedPo(nextPo);
    setBoqStatus(value === workspace.boqTotalPrice ? "Final" : "Approved");
    setFeedback({
      kind: value === workspace.boqTotalPrice ? "success" : "warning",
      message:
        value === workspace.boqTotalPrice
          ? "Nilai PO sudah sesuai dengan BOQ Final. Siap generate RAP."
          : `Selisih ${formatPoDiff(value - workspace.boqTotalPrice)}. RAP belum bisa dibuat sebelum BOQ direvisi agar presisi sama dengan PO.`,
    });
    setShowValidationModal(true);
  }

  function handleGenerateRap() {
    router.push(`/rap/${workspace.rap.rapId}`);
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight md:text-3xl">Customer PO</h2>
        </div>

      </div>

      <Card className="overflow-hidden">
        <div className="bg-gradient-to-r from-primary/5 via-primary/[0.02] to-transparent px-5 pb-5 pt-5 md:px-6">
          <div className="flex items-start justify-between gap-4">
            <div className="min-w-0 flex-1">
              <h2 className="text-xl font-bold tracking-tight text-foreground">{workspace.projectName}</h2>
              <p className="mt-0.5 text-sm text-muted-foreground">{workspace.customerName}</p>
            </div>
            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-sm">
              <UsersIcon className="h-5 w-5" />
            </div>
          </div>
        </div>

        <div className="divide-y divide-border/40 px-5 py-4 md:px-6">
          <div className="grid gap-x-8 gap-y-4 pb-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
            <div>
              <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Opportunity</p>
              <p className="mt-1 font-semibold">{workspace.opportunityCode}</p>
            </div>
            <div>
              <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Quotation</p>
              <p className="mt-1 font-semibold">{workspace.quotationNumber}</p>
            </div>
            <div>
              <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">BOQ</p>
              <p className="mt-1 font-semibold">{workspace.boqCode}</p>
            </div>
            <div>
              <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">BOQ total</p>
              <p className="mt-1 font-semibold">{formatRupiah(workspace.boqTotalPrice)}</p>
            </div>
            <div>
              <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">PO status</p>
              <div className="mt-1">
                <Badge label={getCustomerPoStatusLabel(currentStatus)} className={getCustomerPoStatusClass(currentStatus)} />
              </div>
            </div>
            <div>
              <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">BOQ status</p>
              <div className="mt-1">
                <Badge label={getBoqFinalStatusLabel(boqStatus)} className={getBoqFinalStatusClass(boqStatus)} />
              </div>
              <p className="mt-0.5 text-xs text-muted-foreground">{boqStatus === "Final" ? "BOQ sudah terkunci sebagai BOQ Final dan sinkron dengan PO pelanggan." : "BOQ menunggu validasi presisi dengan PO."}</p>
            </div>
          </div>
        </div>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Form Input Customer PO</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <label className="block">
              <span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Nomor PO</span>
              <input
                value={poNumber}
                onChange={(event) => setPoNumber(event.target.value)}
                className="mt-2 h-11 w-full rounded-xl border border-border/80 bg-background px-3 text-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
                placeholder="PO-XXXX-0000"
              />
            </label>

            <label className="block">
              <span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Tanggal PO</span>
              <input
                type="date"
                value={poDate}
                onChange={(event) => setPoDate(event.target.value)}
                className="mt-2 h-11 w-full rounded-xl border border-border/80 bg-background px-3 text-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
              />
            </label>

            <label className="block">
              <span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Nilai PO</span>
              <input
                value={poValue}
                onChange={(event) => setPoValue(event.target.value.replace(/[^\d]/g, ""))}
                className="mt-2 h-11 w-full rounded-xl border border-border/80 bg-background px-3 text-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
                placeholder="0"
              />
            </label>

            <label className="block">
              <span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Dokumen PO</span>
              <input
                value={fileName}
                onChange={(event) => setFileName(event.target.value)}
                className="mt-2 h-11 w-full rounded-xl border border-border/80 bg-background px-3 text-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
                placeholder="PO.pdf"
              />
              <p className="mt-2 text-xs text-muted-foreground">Simulasi upload file PDF/JPG, max 10MB.</p>
            </label>
          </div>

          <div className="flex flex-wrap gap-2">
            <Button onClick={handleSubmitPo} className="h-11 px-4">
              Simpan Customer PO
            </Button>
          </div>
        </CardContent>
      </Card>

      {showValidationModal && feedback && currentPo ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <button
            type="button"
            aria-label="Close validation modal"
            className="absolute inset-0 bg-slate-950/55 backdrop-blur-sm"
            onClick={() => setShowValidationModal(false)}
          />

          <Card className="relative z-10 w-full max-w-lg overflow-hidden border-border/80 bg-card shadow-[0_30px_100px_rgba(15,23,42,0.25)]">
            <CardHeader className="border-b border-border/70">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-[0.22em] text-primary">Hasil Validasi BR-11</p>
                  <CardTitle className="mt-2 text-xl md:text-2xl">Validasi Customer PO</CardTitle>
                </div>

                <Button
                  variant="outline"
                  size="icon"
                  aria-label="Close validation modal"
                  onClick={() => setShowValidationModal(false)}
                  className="shrink-0"
                >
                  <XIcon className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>

            <CardContent className="space-y-4 p-4 md:p-6">
              <div
                className={cn(
                  "flex items-start gap-3 rounded-xl px-4 py-3 text-sm",
                  feedback.kind === "success" && "bg-emerald-50 text-emerald-800",
                  feedback.kind === "warning" && "bg-amber-50 text-amber-800",
                  feedback.kind === "error" && "bg-rose-50 text-rose-800",
                )}
              >
                <ShieldCheckIcon className="mt-0.5 h-4 w-4 shrink-0" />
                <span>{feedback.message}</span>
              </div>

              <div className="flex flex-wrap gap-x-8 gap-y-3 text-sm">
                <div>
                  <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Nomor PO</p>
                  <p className="mt-0.5 font-semibold">{currentPo.poNumber}</p>
                </div>
                <div>
                  <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Nilai PO</p>
                  <p className="mt-0.5 font-semibold">{formatRupiah(currentPo.poValue)}</p>
                </div>
                <div>
                  <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">BOQ Final</p>
                  <p className="mt-0.5 font-semibold">{formatRupiah(workspace.boqTotalPrice)}</p>
                </div>
              </div>

              <div className="flex flex-wrap gap-2">
                {canGenerateRap ? (
                  <Button onClick={handleGenerateRap} className="h-11 px-4">
                    Lanjut ke Generate RAP
                  </Button>
                ) : (
                  <Link href={`/boq/${workspace.boqId}/revise?source=customer-po`} className={buttonVariants({ variant: "outline", className: "h-11 px-4" })}>
                    Buat Revisi BOQ
                  </Link>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      ) : null}

    </div>
  );
}