import { format } from "date-fns";

import { LazyResultsPieChart } from "@/components/calculator/lazy-results-pie-chart";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { PersistedCalculation } from "@/types/calculation";
import { formatCurrency } from "@/utils/formatting";

interface ReportDetailContentProps {
  calculation: PersistedCalculation;
}

export function ReportDetailContent({ calculation }: ReportDetailContentProps) {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Estate Summary</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-3 text-sm sm:grid-cols-3">
          <p>Total Estate: {formatCurrency(calculation.totalEstate, calculation.currency)}</p>
          <p>Debts: {formatCurrency(calculation.debts, calculation.currency)}</p>
          <p>
            Funeral Expenses:{" "}
            {formatCurrency(calculation.funeralExpenses, calculation.currency)}
          </p>
          <p>Wasiyyah: {formatCurrency(calculation.wasiyyahAmount, calculation.currency)}</p>
          <p>Net Estate: {formatCurrency(calculation.netEstate, calculation.currency)}</p>
          <p className="flex items-center gap-2">
            <Badge>{calculation.madhab.toUpperCase()}</Badge>
            <Badge variant="outline">{calculation.currency}</Badge>
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Heir Allocation</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-3 sm:grid-cols-2">
            {calculation.resultJson.shares.map((share) => (
              <div
                key={`${share.type}-${share.fraction}`}
                className="rounded-lg border border-border bg-muted/30 p-3"
              >
                <p className="text-sm font-semibold text-emerald-900">
                  {share.label} {share.count > 1 ? `(${share.count})` : ""}
                </p>
                <p className="mt-1 text-xs text-muted-foreground">
                  Fraction {share.fraction} · {share.percentage.toFixed(2)}%
                </p>
                <p className="mt-1 text-sm font-semibold text-emerald-800">
                  {formatCurrency(share.amount, calculation.currency)}
                </p>
              </div>
            ))}
          </div>

          <LazyResultsPieChart
            shares={calculation.resultJson.shares}
            currency={calculation.currency}
          />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Report Metadata</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-2 text-sm sm:grid-cols-2">
          <p>
            Created: {format(new Date(calculation.createdAt), "PPP p")}
          </p>
          <p>
            Last Updated: {format(new Date(calculation.updatedAt), "PPP p")}
          </p>
          <p>Report ID: {calculation.id}</p>
          <p>Share Token: {calculation.reportToken}</p>
        </CardContent>
      </Card>
    </div>
  );
}