"use client";

import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { format } from "date-fns";
import {
  Copy,
  ExternalLink,
  FolderOpen,
  Pencil,
  RotateCcw,
  Trash2,
} from "lucide-react";
import { toast } from "sonner";

import { deleteCaseAction, renameCaseAction } from "@/app/actions/case-actions";
import { PdfDownloadButton } from "@/components/reports/pdf-download-button";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import type { PersistedCalculation } from "@/types/calculation";
import { getAbsoluteShareUrl } from "@/utils/report-sharing";
import { formatCurrency } from "@/utils/formatting";

interface CaseListProps {
  cases: PersistedCalculation[];
  appBaseUrl: string;
}

export function CaseList({ cases, appBaseUrl }: CaseListProps) {
  const router = useRouter();
  const [activeCase, setActiveCase] = React.useState<PersistedCalculation | null>(
    null,
  );
  const [titleDraft, setTitleDraft] = React.useState("");
  const [isBusy, startTransition] = React.useTransition();

  const onOpenRename = (item: PersistedCalculation) => {
    setActiveCase(item);
    setTitleDraft(item.title);
  };

  const copyShareLink = async (item: PersistedCalculation) => {
    try {
      const shareUrl = getAbsoluteShareUrl(item.reportToken, appBaseUrl);
      await navigator.clipboard.writeText(shareUrl);
      toast.success("Share link copied.");
    } catch {
      toast.error("Unable to copy share link.");
    }
  };

  const submitRename = () => {
    if (!activeCase) return;
    startTransition(async () => {
      const result = await renameCaseAction({
        id: activeCase.id,
        title: titleDraft,
      });

      if (!result.success) {
        toast.error(result.message);
        return;
      }

      toast.success(result.message);
      setActiveCase(null);
      router.refresh();
    });
  };

  const deleteCase = (item: PersistedCalculation) => {
    startTransition(async () => {
      const result = await deleteCaseAction({ id: item.id });
      if (!result.success) {
        toast.error(result.message);
        return;
      }

      toast.success(result.message);
      router.refresh();
    });
  };

  return (
    <>
      <div className="space-y-3">
        {cases.map((item) => (
          <div
            key={item.id}
            className="rounded-lg border border-border bg-card p-4 shadow-sm"
          >
            <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
              <div className="space-y-2">
                <p className="text-base font-semibold text-emerald-900">{item.title}</p>
                <p className="text-xs text-muted-foreground">
                  {format(new Date(item.createdAt), "PPP p")}
                </p>
                <div className="flex flex-wrap items-center gap-2">
                  <Badge>{item.madhab.toUpperCase()}</Badge>
                  <Badge variant="outline">{item.currency}</Badge>
                  <Badge variant="outline">
                    {formatCurrency(item.netEstate, item.currency)}
                  </Badge>
                </div>
              </div>

              <div className="flex flex-wrap gap-2">
                <Button asChild variant="outline" size="sm">
                  <Link href={`/dashboard/cases/${item.id}`}>
                    <FolderOpen className="size-4" />
                    Open
                  </Link>
                </Button>
                <Button asChild variant="outline" size="sm">
                  <Link href={`/calculator?reopen=${item.id}`}>
                    <RotateCcw className="size-4" />
                    Reopen
                  </Link>
                </Button>
                <PdfDownloadButton
                  endpoint={`/api/reports/${item.id}/pdf`}
                  filename={`alwirasah-${item.id}.pdf`}
                  variant="outline"
                  size="sm"
                />
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => copyShareLink(item)}
                >
                  <Copy className="size-4" />
                  Share
                </Button>
                <Button variant="outline" size="sm" onClick={() => onOpenRename(item)}>
                  <Pencil className="size-4" />
                  Rename
                </Button>
                <Button
                  variant="destructive"
                  size="sm"
                  onClick={() => deleteCase(item)}
                  disabled={isBusy}
                >
                  <Trash2 className="size-4" />
                  Delete
                </Button>
                <Button asChild size="sm">
                  <Link href={`/shared/report/${item.reportToken}`} target="_blank">
                    <ExternalLink className="size-4" />
                    View Shared
                  </Link>
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>

      <Dialog open={Boolean(activeCase)} onOpenChange={(open) => !open && setActiveCase(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Rename Case</DialogTitle>
            <DialogDescription>
              Use a clear title to identify this inheritance report.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <Input
              value={titleDraft}
              onChange={(event) => setTitleDraft(event.target.value)}
              maxLength={120}
            />
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setActiveCase(null)}>
                Cancel
              </Button>
              <Button onClick={submitRename} disabled={isBusy}>
                {isBusy ? "Saving..." : "Save Title"}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}