"use client";

import { useMemo, 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 { FileTextIcon, PencilIcon, ShieldCheckIcon, UsersIcon } from "@/components/dashboard-icons";
import { formatRupiah } from "@/lib/crm-pages-data";
import {
  BoqRevisionSource,
  BoqRevisionType,
  getBoqRevisionContext,
  submitBoqRevision,
} from "@/lib/boq-revision-data";
import { cn } from "@/lib/utils";

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

function formatDateTime(value: string) {
  return new Date(value).toLocaleString("id-ID", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

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 getTypeCardClass(active: boolean, tone: "blue" | "emerald") {
  if (active && tone === "blue") {
    return "border-blue-300 bg-blue-50/80 shadow-sm shadow-blue-950/5";
  }

  if (active && tone === "emerald") {
    return "border-emerald-300 bg-emerald-50/80 shadow-sm shadow-emerald-950/5";
  }

  return "border-border/70 bg-background hover:border-primary/40 hover:bg-accent/40";
}

function getTypeToneClass(type: BoqRevisionType) {
  return type === "harga_qty" ? "bg-blue-100 text-blue-700" : "bg-emerald-100 text-emerald-700";
}


function buildQuantityDrafts(items: { id: string; quantity: number }[]) {
  return Object.fromEntries(items.map((item) => [item.id, String(item.quantity)]));
}

export function BoqRevisionWorkspace({
  boqId,
  sourceHint,
}: {
  boqId?: string;
  sourceHint?: BoqRevisionSource;
}) {
  const router = useRouter();
  const context = useMemo(() => getBoqRevisionContext(boqId, sourceHint), [boqId, sourceHint]);
  const [revisionType, setRevisionType] = useState<BoqRevisionType | null>(null);
  const [quantityDrafts, setQuantityDrafts] = useState<Record<string, string>>(() =>
    context ? buildQuantityDrafts(context.workspace.items) : {},
  );
  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const quantityValidation = useMemo(() => {
    if (!context || revisionType !== "harga_qty") {
      return { invalidCount: 0, firstError: null as string | null };
    }

    let invalidCount = 0;
    let firstError: string | null = null;

    for (const item of context.workspace.items) {
      const parsed = Number(quantityDrafts[item.id] ?? "");

      if (!Number.isFinite(parsed) || parsed <= 0) {
        invalidCount += 1;
        if (!firstError) {
          firstError = item.itemName;
        }
      }
    }

    return { invalidCount, firstError };
  }, [context, quantityDrafts, revisionType]);

  const canSubmit = Boolean(context && revisionType && (revisionType === "item" || quantityValidation.invalidCount === 0));

  function handleSubmit() {
    if (!context || !revisionType) {
      setFeedback({
        kind: "error",
        message: "Pilih jenis revisi terlebih dahulu.",
      });
      return;
    }

    if (revisionType === "harga_qty" && quantityValidation.invalidCount > 0) {
      setFeedback({
        kind: "error",
        message: "Qty baru harus diisi dengan angka lebih besar dari 0 untuk seluruh item.",
      });
      return;
    }

    setIsSubmitting(true);

    const result = submitBoqRevision({
      boqId: context.workspace.boqId,
      revisionType,
      quantityDrafts,
    });

    if (!result) {
      setIsSubmitting(false);
      setFeedback({
        kind: "error",
        message: "Revisi tidak dapat dibuat karena data BOQ tidak ditemukan.",
      });
      return;
    }

    setFeedback({
      kind: "success",
      message: `Revisi dibuat (${result.boqCode}). Mengarahkan ke ${revisionType === "harga_qty" ? "Pricing Workspace" : "Breakdown Workspace"}.`,
    });

    window.setTimeout(() => {
      router.push(result.redirectTo);
    }, 450);
  }

  if (!context) {
    return (
      <div className="space-y-6">
        <Card>
          <CardContent className="space-y-4 p-5">
            <div>
              <h2 className="mt-2 text-2xl font-semibold tracking-tight">Revisi BOQ tidak ditemukan</h2>
            </div>
            <Link href="/boq" className={buttonVariants({ className: "w-full sm:w-auto" })}>
              Back to BOQ Workspace
            </Link>
          </CardContent>
        </Card>
      </div>
    );
  }

  const activeHistoryCount = context.history.filter((row) => row.isActive).length;

  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">Revisi BOQ</h2>
        </div>

        <div className="flex w-full flex-col gap-2 sm:flex-row lg:w-auto">
          <Link href={context.returnHref} className={buttonVariants({ variant: "outline", className: "w-full sm:w-auto" })}>
            Back to queue
          </Link>
          <Link
            href={`/boq/${context.workspace.boqId}/breakdown`}
            className={buttonVariants({ variant: "outline", className: "w-full sm:w-auto" })}
          >
            Open BOQ Workspace
          </Link>
        </div>
      </div>

      {feedback ? (
        <div
          className={cn(
            "fixed bottom-6 right-6 z-50 flex w-80 items-start gap-3 rounded-xl border px-4 py-3 text-sm shadow-[0_20px_60px_rgba(0,0,0,0.15)] backdrop-blur-sm",
            feedback.kind === "success" && "border-emerald-200 bg-emerald-50/95 text-emerald-800",
            feedback.kind === "warning" && "border-amber-200 bg-amber-50/95 text-amber-800",
            feedback.kind === "error" && "border-rose-200 bg-rose-50/95 text-rose-800",
          )}
        >
          <div className="flex-1">
            <div className="flex items-start gap-3">
              <ShieldCheckIcon className="mt-0.5 h-4 w-4 shrink-0" />
              <span>{feedback.message}</span>
            </div>
          </div>
          <button type="button" onClick={() => setFeedback(null)} className="shrink-0 text-muted-foreground hover:text-foreground">&times;</button>
        </div>
      ) : null}

        <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">
                <p className="text-xs font-medium uppercase tracking-[0.15em] text-primary/60">Info Opportunity & BOQ Lama</p>
                <h2 className="mt-1.5 text-xl font-bold tracking-tight text-foreground">{context.workspace.projectName}</h2>
                <p className="mt-0.5 text-sm text-muted-foreground">{context.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-4">
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">BOQ code</p>
                <p className="mt-1 font-semibold">{context.workspace.boqCode}</p>
                <p className="text-xs text-muted-foreground">Version {context.workspace.version}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Status</p>
                <div className="mt-1 flex flex-wrap gap-1.5">
                  <Badge label="Revision" className="bg-rose-100 text-rose-700" />
                </div>
                <p className="text-xs text-muted-foreground">Created on {formatDateTime(context.workspace.costingAt)}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Created by</p>
                <p className="mt-1 font-semibold">{context.workspace.costingBy}</p>
                <p className="text-xs text-muted-foreground">Original costing owner</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Total selling price</p>
                <p className="mt-1 text-lg font-bold tracking-tight text-foreground">{formatRupiah(context.workspace.items.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0))}</p>
                <p className="text-xs text-muted-foreground">Nilai BOQ versi lama sebelum revisi dibuat.</p>
              </div>
            </div>

            <div className="pt-4">
              <p className="text-xs font-medium uppercase tracking-[0.1em] text-amber-700/60">Alasan revisi</p>
              <h3 className="mt-1 text-base font-semibold text-foreground">{context.source.label}</h3>
              <div className="mt-3 grid gap-x-8 gap-y-3 sm:grid-cols-2">
                <div>
                  <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Triggered by</p>
                  <p className="mt-0.5 font-semibold text-foreground">{context.source.by}</p>
                </div>
                <div>
                  <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Triggered at</p>
                  <p className="mt-0.5 font-semibold text-foreground">{formatDateTime(context.source.at)}</p>
                </div>
              </div>
              <div className="mt-4 rounded-xl bg-muted/30 px-4 py-3 text-sm leading-6 text-muted-foreground">
                {context.source.notes}
              </div>
            </div>
          </div>
        </Card>

      <Card>
        <CardHeader>
          <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
            <div>
              <CardTitle>Pilih Jenis Revisi</CardTitle>
              <p className="mt-1 text-sm text-muted-foreground">
                Wajib pilih satu jenis revisi sebelum membuat versi baru. Jenis yang dipilih menentukan route lanjutan setelah submit.
              </p>
            </div>
            <Badge label={`${activeHistoryCount} versi`} className="bg-slate-100 text-slate-700" />
          </div>
        </CardHeader>

        <CardContent className="space-y-4">
          <div className="grid gap-3 md:grid-cols-2">
            <button
              type="button"
              aria-pressed={revisionType === "harga_qty"}
              onClick={() => setRevisionType("harga_qty")}
              className={cn("rounded-2xl border p-4 text-left transition", getTypeCardClass(revisionType === "harga_qty", "blue"))}
            >
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-blue-100 text-blue-700">
                      <PencilIcon className="h-4 w-4" />
                    </span>
                    <div>
                      <p className="text-sm font-semibold text-foreground">Revisi Harga / Quantity</p>
                      <p className="mt-1 text-xs text-muted-foreground">Qty bisa diubah di tabel berikut sebelum pricing.</p>
                    </div>
                  </div>
                </div>
                <Badge label="Recommended" className={getTypeToneClass("harga_qty")} />
              </div>
            </button>

            <button
              type="button"
              aria-pressed={revisionType === "item"}
              onClick={() => setRevisionType("item")}
              className={cn("rounded-2xl border p-4 text-left transition", getTypeCardClass(revisionType === "item", "emerald"))}
            >
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700">
                      <FileTextIcon className="h-4 w-4" />
                    </span>
                    <div>
                      <p className="text-sm font-semibold text-foreground">Revisi Item</p>
                      <p className="mt-1 text-xs text-muted-foreground">Lanjut ke breakdown workspace untuk ubah struktur item penuh.</p>
                    </div>
                  </div>
                </div>
                <Badge label="Breakdown" className={getTypeToneClass("item")} />
              </div>
            </button>
          </div>

          {revisionType === "harga_qty" ? (
            <div className="space-y-4">
              <div className="rounded-2xl border border-blue-200 bg-blue-50/80 px-4 py-3 text-sm text-blue-900">
                Qty lama tetap ditampilkan sebagai referensi, sementara qty baru akan dipakai untuk versi BOQ berikutnya.
              </div>
              {quantityValidation.invalidCount > 0 ? (
                <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                  {quantityValidation.invalidCount} item masih punya qty tidak valid. Periksa kembali item
                  {quantityValidation.firstError ? `, terutama ${quantityValidation.firstError}` : ""}.
                </div>
              ) : null}

              <div className="overflow-x-auto rounded-2xl border border-border/70">
                <table className="min-w-full border-separate border-spacing-0 text-left text-sm">
                  <thead className="sticky top-0 bg-card/95 text-xs uppercase tracking-[0.2em] text-muted-foreground backdrop-blur">
                    <tr>
                      <th className="border-b border-border/70 px-5 py-2 font-semibold">Item</th>
                      <th className="border-b border-border/70 px-5 py-2 font-semibold">Kategori</th>
                      <th className="border-b border-border/70 px-5 py-2 font-semibold">Qty lama</th>
                      <th className="border-b border-border/70 px-5 py-2 font-semibold">Qty baru</th>
                      <th className="border-b border-border/70 px-5 py-2 font-semibold">Satuan</th>
                    </tr>
                  </thead>
                  <tbody>
                    {context.workspace.items.map((item) => {
                      const nextQty = quantityDrafts[item.id] ?? "";
                      const isInvalid = Number(nextQty) <= 0 || !nextQty.trim();

                      return (
                        <tr key={item.id} className={cn("transition hover:bg-accent/40", isInvalid && "bg-rose-50/30")}>
                          <td className="border-b border-border/70 px-5 py-4 align-top">
                            <div className="font-semibold text-foreground">{item.itemName}</div>
                          </td>
                          <td className="border-b border-border/70 px-5 py-4 align-top text-muted-foreground">{item.category}</td>
                          <td className="border-b border-border/70 px-5 py-4 align-top font-medium">{item.quantity}</td>
                          <td className="border-b border-border/70 px-5 py-4 align-top">
                            <input
                              type="number"
                              min="0"
                              step="0.001"
                              value={nextQty}
                              onChange={(event) => setQuantityDrafts((current) => ({ ...current, [item.id]: event.target.value }))}
                              className={cn(
                                "h-11 w-full rounded-xl border bg-background px-3 text-sm outline-none transition focus:ring-2 focus:ring-primary/20",
                                isInvalid ? "border-rose-300 focus:border-rose-400 focus:ring-rose-200" : "border-border/80 focus:border-primary/50",
                              )}
                            />
                          </td>
                          <td className="border-b border-border/70 px-5 py-4 align-top text-muted-foreground">{item.unit}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          ) : null}

          {revisionType === "item" ? (
            <div className="rounded-2xl border border-emerald-200 bg-emerald-50/80 px-4 py-4 text-sm text-emerald-900">
              <p className="font-semibold">Revisi item akan diarahkan ke Breakdown Workspace.</p>
              <p className="mt-1 text-sm text-emerald-900/80">
                Di tahap ini Anda hanya memilih jenis revisi. Struktur item detail akan dibuka di workspace breakdown untuk disesuaikan ulang.
              </p>
            </div>
          ) : null}
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="p-0 md:p-0 px-8 md:px-8 pt-4 pb-1 md:pt-5 md:pb-1.5">
          <CardTitle className="text-lg">Riwayat Revisi</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="min-w-full border-separate border-spacing-0 text-left text-sm">
              <thead className="sticky top-0 bg-card/95 text-xs uppercase tracking-[0.2em] text-muted-foreground backdrop-blur">
                <tr>
                  <th className="border-b border-border/70 px-5 py-2 font-semibold">Versi</th>
                  <th className="border-b border-border/70 px-5 py-2 font-semibold">Status</th>
                  <th className="border-b border-border/70 px-5 py-2 font-semibold">Dibuat</th>
                  <th className="border-b border-border/70 px-5 py-2 font-semibold">Alasan</th>
                </tr>
              </thead>
              <tbody>
                {context.history.map((row) => (
                  <tr key={`${row.boqId}-${row.version}`} className="transition hover:bg-accent/60">
                    <td className="border-b border-border/70 px-5 py-4 align-top font-medium">
                      <div className="flex flex-col gap-2">
                        <span>{row.boqCode}</span>
                        {row.isActive ? <Badge label="Sedang berjalan" className="bg-emerald-100 text-emerald-700" /> : null}
                      </div>
                    </td>
                    <td className="border-b border-border/70 px-5 py-4 align-top">
                      <Badge
                        label={row.isActive ? row.status : row.status}
                        className={
                          row.status === "Costing Complete"
                            ? "bg-blue-100 text-blue-700"
                            : row.status === "Draft"
                              ? "bg-slate-100 text-slate-700"
                              : "bg-rose-100 text-rose-700"
                        }
                      />
                    </td>
                    <td className="border-b border-border/70 px-5 py-4 align-top text-muted-foreground">{formatDateTime(row.createdAt)}</td>
                    <td className="border-b border-border/70 px-5 py-4 align-top text-muted-foreground">{row.reason}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between md:p-5">
          <div>
            <p className="text-sm text-muted-foreground">Action bar</p>
            <p className="mt-1 text-sm font-medium">
              {revisionType === null
                ? "Pilih jenis revisi terlebih dahulu."
                : revisionType === "harga_qty"
                  ? "Qty baru akan dipakai untuk versi BOQ berikutnya, lalu diarahkan ke Pricing."
                  : "BOQ baru akan dibuat dan diarahkan ke Breakdown Workspace."}
            </p>
          </div>

          <div className="flex flex-col gap-2 sm:flex-row">
            <Button variant="outline" onClick={() => router.push(context.returnHref)} disabled={isSubmitting}>
              Back to queue
            </Button>
            <Button onClick={handleSubmit} disabled={!canSubmit || isSubmitting}>
              <ShieldCheckIcon className="mr-2 h-4 w-4" />
              {isSubmitting ? "Submitting..." : "Buat Revisi & Lanjutkan"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}