import type { FinancialDetail } from "@/lib/types";

type RightDetailPanelProps = {
  detail: FinancialDetail;
};

export default function RightDetailPanel({ detail }: RightDetailPanelProps) {
  const maxValue = Math.max(...detail.trend.map((point) => point.value));

  return (
    <aside className="sticky top-5 h-fit rounded-benell border border-benell-stroke bg-benell-surface p-4 shadow-benell md:p-5">
      <h2 className="text-h2 break-words font-semibold">{detail.title}</h2>
      <div className="mt-3 flex items-end gap-2">
        <p className="text-kpi min-w-0 break-words font-semibold">{detail.amount}</p>
        <p className="text-body-lg pb-0.5 text-benell-text-soft text-tabular">{detail.percentage}</p>
      </div>

      <section className="mt-8">
        <h3 className="text-h3 font-semibold">Desglose</h3>
        <ul className="mt-3 divide-y divide-benell-stroke">
          {detail.breakdown.map((item) => (
            <li key={item.label} className="flex min-w-0 items-center justify-between gap-4 py-2.5 text-body-lg">
              <span className="min-w-0 truncate text-benell-text-soft">{item.label}</span>
              <span className="shrink-0 font-medium text-tabular">{item.value}</span>
            </li>
          ))}
        </ul>
      </section>

      <section className="mt-8">
        <h3 className="text-h3 font-semibold">Tendencia (ultimas 4 semanas)</h3>
        <ul className="mt-4 space-y-2">
          {detail.trend.map((point) => (
            <li key={point.week} className="grid grid-cols-[2rem_1fr_auto] items-center gap-2 text-body">
              <span>{point.week}</span>
              <span className="h-3 rounded-pill bg-benell-surface-muted">
                <span
                  className="block h-3 rounded-pill bg-benell-caramel"
                  style={{ width: `${(point.value / maxValue) * 100}%` }}
                />
              </span>
              <span className="font-medium text-tabular">{point.label}</span>
            </li>
          ))}
        </ul>
      </section>

      <section className="mt-8 rounded-benell bg-benell-surface-muted p-4">
        <h3 className="text-h3 font-semibold">Observaciones</h3>
        <p className="text-body mt-2 text-benell-text-soft">{detail.notes}</p>
      </section>
    </aside>
  );
}
