import type { BaziChart, PillarInfo } from "@/lib/calc/bazi";

function PillarRow({ label, pillar }: { label: string; pillar: PillarInfo }) {
  return (
    <tr className="border-t">
      <td className="px-3 py-2 font-medium">{label}</td>
      <td className="px-3 py-2 font-mono">{pillar.ganZhi}</td>
      <td className="px-3 py-2">{pillar.shiShenGan}</td>
      <td className="px-3 py-2 text-sm">
        {pillar.shiShenZhi.join("、") || "—"}
      </td>
      <td className="px-3 py-2 text-sm">{pillar.naYin}</td>
    </tr>
  );
}

export default function BaziChartDisplay({ chart }: { chart: BaziChart }) {
  return (
    <div className="space-y-4 rounded-lg border bg-card p-4 text-sm">
      <div className="grid gap-1 text-muted-foreground sm:grid-cols-2">
        <span>出生：{chart.birthTime}</span>
        <span>真太阳时：{chart.trueSolarTime}</span>
        <span className="sm:col-span-2">农历：{chart.lunarDate}</span>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-muted/50 text-left">
            <tr>
              <th className="px-3 py-2">柱</th>
              <th className="px-3 py-2">干支</th>
              <th className="px-3 py-2">天干十神</th>
              <th className="px-3 py-2">地支十神</th>
              <th className="px-3 py-2">纳音</th>
            </tr>
          </thead>
          <tbody>
            <PillarRow label="年柱" pillar={chart.pillars.year} />
            <PillarRow label="月柱" pillar={chart.pillars.month} />
            <PillarRow label="日柱" pillar={chart.pillars.day} />
            <PillarRow label="时柱" pillar={chart.pillars.time} />
          </tbody>
        </table>
      </div>

      <div>
        <div className="mb-1 font-medium">大运</div>
        <p className="text-muted-foreground">
          起运 {chart.daYun.startYear} 年 {chart.daYun.startMonth} 月{" "}
          {chart.daYun.startDay} 天 ·{" "}
          {chart.daYun.items.map((d) => `${d.startAge}岁 ${d.ganZhi}`).join(" → ")}
        </p>
      </div>

      <div>
        <div className="mb-1 font-medium">流年</div>
        <p className="text-muted-foreground">
          {chart.liuNian.map((l) => `${l.year}(${l.ganZhi})`).join("、")}
        </p>
      </div>

      <div>
        <div className="mb-1 font-medium">神煞</div>
        <p className="text-muted-foreground">
          吉神：{chart.shenSha.ji.join("、") || "无"}
          <br />
          凶煞：{chart.shenSha.xiong.join("、") || "无"}
        </p>
      </div>
    </div>
  );
}