"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { Save } from "lucide-react";

import { LazyResultsPieChart } from "@/components/calculator/lazy-results-pie-chart";
import { PdfDownloadButton } from "@/components/reports/pdf-download-button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { formatCurrency } from "@/utils/formatting";
import type { InheritanceResult } from "@/types/inheritance";

interface ResultsPanelProps {
  result: InheritanceResult;
  currency: string;
  onSave: () => void;
  canSave: boolean;
  saving: boolean;
  savedCalculationId: string | null;
}

export function ResultsPanel({
  result,
  currency,
  onSave,
  canSave,
  saving,
  savedCalculationId,
}: ResultsPanelProps) {
  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg text-emerald-900">Distribution Results</CardTitle>
          <CardDescription>
            Net Estate: <strong>{formatCurrency(result.netEstate, currency)}</strong>
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-3 sm:grid-cols-2">
            {result.shares.map((share, index) => (
              <motion.div
                key={share.type}
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.22, delay: index * 0.03 }}
                className="rounded-lg border border-border bg-muted/30 p-3"
              >
                <div className="flex items-center justify-between">
                  <p className="text-sm font-medium text-emerald-900">
                    {share.label} {share.count > 1 ? `(${share.count})` : ""}
                  </p>
                  <Badge>{share.fraction}</Badge>
                </div>
                <p className="mt-1 text-xs text-muted-foreground">{share.percentage}%</p>
                <div className="mt-2 h-1.5 rounded-full bg-emerald-100">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={{ width: `${Math.min(share.percentage, 100)}%` }}
                    transition={{ duration: 0.4, delay: 0.1 + index * 0.03 }}
                    className="h-full rounded-full bg-emerald-700"
                  />
                </div>
                <p className="mt-1 text-sm font-semibold text-emerald-800">
                  {formatCurrency(share.amount, currency)}
                </p>
                {share.quranReference ? (
                  <p className="mt-1 text-[11px] text-muted-foreground">{share.quranReference}</p>
                ) : null}
              </motion.div>
            ))}
          </div>

          <LazyResultsPieChart shares={result.shares} currency={currency} />

          {result.excludedHeirs.length > 0 ? (
            <Alert>
              <AlertTitle>Excluded Heirs</AlertTitle>
              <AlertDescription>
                {result.excludedHeirs.map((heir) => `${heir.type} (${heir.count})`).join(", ")}
              </AlertDescription>
            </Alert>
          ) : null}

          {result.notes.length > 0 ? (
            <Alert>
              <AlertTitle>Notes</AlertTitle>
              <AlertDescription>{result.notes.join(" ")}</AlertDescription>
            </Alert>
          ) : null}

          <div className="flex flex-wrap gap-2">
            {savedCalculationId ? (
              <>
                <Button asChild>
                  <Link href={`/dashboard/cases/${savedCalculationId}`}>Open in Dashboard</Link>
                </Button>
                <PdfDownloadButton
                  endpoint={`/api/reports/${savedCalculationId}/pdf`}
                  filename={`alwirasah-${savedCalculationId}.pdf`}
                  variant="outline"
                />
              </>
            ) : (
              <Button onClick={onSave} disabled={!canSave || saving}>
                <Save className="size-4" />
                {saving ? "Saving..." : "Save Calculation"}
              </Button>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}