"use client";

import { AlertTriangle, CheckCircle2 } from "lucide-react";

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

interface AiCaseResultPanelProps {
  result: InheritanceResult;
  currency: string;
}

export function AiCaseResultPanel({ result, currency }: AiCaseResultPanelProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg text-emerald-900">Calculated Distribution</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) => (
            <div key={share.type} className="rounded-lg border border-border bg-muted/30 p-3">
              <div className="flex items-center justify-between">
                <p className="text-sm font-semibold 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>
              <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}
            </div>
          ))}
        </div>

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

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

        {result.notes.length > 0 ? (
          <Alert>
            <CheckCircle2 className="size-4" />
            <AlertTitle>Notes</AlertTitle>
            <AlertDescription>{result.notes.join(" ")}</AlertDescription>
          </Alert>
        ) : null}
      </CardContent>
    </Card>
  );
}