import { Sparkles, Compass, Users } from "lucide-react";
import { calculateThanSat, THAN_SAT_DESCRIPTIONS } from "@/lib/feng-shui/than-sat";

type Props = {
  year: number;
};

export function ThanSatPanel({ year }: Props) {
  const ts = calculateThanSat(year);

  const items = [
    {
      key: "loc" as const,
      icon: Sparkles,
      iconColor: "text-amber-300",
      bgColor: "bg-amber-500/10",
      borderColor: "border-amber-400/40",
      title: THAN_SAT_DESCRIPTIONS.loc.name,
      directions: [`${ts.loc.chi} (${ts.loc.direction})`],
      meaning: THAN_SAT_DESCRIPTIONS.loc.meaning,
      activate: THAN_SAT_DESCRIPTIONS.loc.activate,
    },
    {
      key: "ma" as const,
      icon: Compass,
      iconColor: "text-sky-300",
      bgColor: "bg-sky-500/10",
      borderColor: "border-sky-400/40",
      title: THAN_SAT_DESCRIPTIONS.ma.name,
      directions: [`${ts.ma.chi} (${ts.ma.direction})`],
      meaning: THAN_SAT_DESCRIPTIONS.ma.meaning,
      activate: THAN_SAT_DESCRIPTIONS.ma.activate,
    },
    {
      key: "quy" as const,
      icon: Users,
      iconColor: "text-violet-300",
      bgColor: "bg-violet-500/10",
      borderColor: "border-violet-400/40",
      title: THAN_SAT_DESCRIPTIONS.quy.name,
      directions: [
        `${ts.quy.chis[0]} (${ts.quy.directions[0]})`,
        `${ts.quy.chis[1]} (${ts.quy.directions[1]})`,
      ],
      meaning: THAN_SAT_DESCRIPTIONS.quy.meaning,
      activate: THAN_SAT_DESCRIPTIONS.quy.activate,
    },
  ];

  return (
    <div className="border-stroke-default bg-bg-elevated/40 rounded-xl border p-6 lg:p-8">
      <div className="mb-5">
        <h3 className="font-display text-lg font-semibold lg:text-xl">Lộc · Mã · Quý Nhân</h3>
        <p className="text-ink-secondary mt-0.5 text-xs lg:text-sm">
          Ba thần sát theo trụ năm sinh{" "}
          <strong className="text-ink-primary">
            {ts.pillar.can} {ts.pillar.chi}
          </strong>{" "}
          · vị trí cố định, không đổi theo năm
        </p>
      </div>

      <div className="grid gap-4 lg:grid-cols-3">
        {items.map((item) => {
          const Icon = item.icon;
          return (
            <div
              key={item.key}
              className={`rounded-lg border p-4 ${item.bgColor} ${item.borderColor}`}
            >
              <div className="mb-3 flex items-center gap-2">
                <Icon className={`h-5 w-5 ${item.iconColor}`} aria-hidden="true" />
                <h4 className="text-ink-primary font-display text-sm font-semibold lg:text-base">
                  {item.title}
                </h4>
              </div>

              <div className="mb-3 flex flex-wrap gap-1.5">
                {item.directions.map((d) => (
                  <span
                    key={d}
                    className={`rounded-md border px-2 py-0.5 text-xs font-medium ${item.borderColor} ${item.iconColor}`}
                  >
                    {d}
                  </span>
                ))}
              </div>

              <p className="text-ink-secondary mb-2 text-xs leading-relaxed">{item.meaning}</p>
              <div className="border-stroke-default/30 border-t pt-2">
                <div className="text-ink-muted mb-0.5 text-[10px] tracking-wider uppercase">
                  Cách kích hoạt
                </div>
                <p className="text-ink-secondary text-xs leading-relaxed">{item.activate}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}