import { cn } from "@/lib/utils";
import type { DayInfo } from "@/lib/calendar/engine";
import { Sun, Moon, Sparkles, AlertTriangle } from "lucide-react";

const DAY_OF_WEEK_VI = ["Chủ nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy"];

export function DayCard({ info }: { info: DayInfo }) {
  return (
    <article className="border-stroke-subtle bg-bg-elevated/40 rounded-2xl border p-5 lg:p-7">
      {/* Header */}
      <div className="border-stroke-subtle mb-5 flex flex-wrap items-end justify-between gap-3 border-b pb-5">
        <div>
          <div className="text-ink-muted text-xs tracking-wider uppercase">
            {DAY_OF_WEEK_VI[info.dayOfWeek] ?? ""}
          </div>
          <div className="font-numeral text-ink-primary text-3xl lg:text-4xl">{info.solarDate}</div>
          <div className="text-ink-secondary mt-0.5 text-sm">{info.lunarLabel}</div>
        </div>
        <div
          className={cn(
            "rounded-full border px-3 py-1.5 text-xs font-medium",
            info.isHoangDaoDay
              ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-300"
              : "border-rose-500/40 bg-rose-500/10 text-rose-300"
          )}
        >
          {info.isHoangDaoDay ? "Ngày Hoàng đạo" : "Ngày Hắc đạo"}
          {info.tianshen ? ` · ${info.tianshen.vi}` : ""}
        </div>
      </div>

      {/* Pillars */}
      <div className="mb-5 grid grid-cols-3 gap-3">
        <Pillar label="Năm" value={info.yearGanZhi} sub={info.yearZodiac} />
        <Pillar label="Tháng" value={info.monthGanZhi} />
        <Pillar label="Ngày" value={info.dayGanZhi} sub={`Trực ${info.truc}`} />
      </div>

      {/* Sao + tú */}
      <div className="mb-5 grid grid-cols-1 gap-3 sm:grid-cols-2">
        <div className="bg-bg-inset/60 rounded-lg p-4">
          <div className="text-ink-muted mb-1 text-xs tracking-wider uppercase">
            Sao Nhị Thập Bát Tú
          </div>
          <div className="font-display text-ink-primary text-lg">
            {info.xiu?.vi ?? "—"}{" "}
            <span
              className={cn(
                "ml-1 text-xs",
                info.xiu?.luck === "Cát" ? "text-emerald-300" : "text-rose-300"
              )}
            >
              {info.xiu?.luck ?? ""}
            </span>
          </div>
        </div>
        <div className="bg-bg-inset/60 rounded-lg p-4">
          <div className="text-ink-muted mb-1 text-xs tracking-wider uppercase">Lễ tiết</div>
          <div className="text-ink-secondary text-sm">
            {info.festivals.length > 0 ? info.festivals.join(", ") : "—"}
          </div>
        </div>
      </div>

      {/* Yi / Ji */}
      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
        <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/[0.04] p-4">
          <div className="mb-2 flex items-center gap-2 text-emerald-300">
            <Sparkles className="h-4 w-4" aria-hidden="true" />
            <span className="text-xs font-medium tracking-wider uppercase">Nên làm</span>
          </div>
          {info.yi.length > 0 ? (
            <ul className="text-ink-secondary flex flex-wrap gap-1.5 text-sm">
              {info.yi.map((y) => (
                <li
                  key={y}
                  className="border-stroke-subtle bg-bg-inset/60 rounded border px-2 py-0.5 text-xs"
                >
                  {y}
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-ink-muted text-xs">Không có việc đặc biệt nên làm.</p>
          )}
        </div>

        <div className="rounded-lg border border-rose-500/30 bg-rose-500/[0.04] p-4">
          <div className="mb-2 flex items-center gap-2 text-rose-300">
            <AlertTriangle className="h-4 w-4" aria-hidden="true" />
            <span className="text-xs font-medium tracking-wider uppercase">Kiêng làm</span>
          </div>
          {info.ji.length > 0 ? (
            <ul className="text-ink-secondary flex flex-wrap gap-1.5 text-sm">
              {info.ji.map((j) => (
                <li
                  key={j}
                  className="border-stroke-subtle bg-bg-inset/60 rounded border px-2 py-0.5 text-xs"
                >
                  {j}
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-ink-muted text-xs">Không có việc cần kiêng.</p>
          )}
        </div>
      </div>

      {/* Hours */}
      <div className="mt-5">
        <div className="text-ink-muted mb-2 flex items-center gap-2 text-xs tracking-wider uppercase">
          <Sun className="h-4 w-4" aria-hidden="true" />
          Giờ Hoàng đạo / Hắc đạo
        </div>
        <div className="grid grid-cols-3 gap-1.5 sm:grid-cols-4 lg:grid-cols-6">
          {info.allHours.map((h) => (
            <div
              key={h.branch}
              className={cn(
                "rounded border px-2 py-1.5 text-center",
                h.isHoang
                  ? "border-emerald-500/30 bg-emerald-500/5 text-emerald-200"
                  : "border-rose-500/30 bg-rose-500/5 text-rose-200/80"
              )}
            >
              <div className="font-display text-sm font-medium">{h.branch}</div>
              <div className="text-[10px] opacity-70">{h.range}</div>
            </div>
          ))}
        </div>
      </div>
    </article>
  );
}

function Pillar({ label, value, sub }: { label: string; value: string; sub?: string }) {
  return (
    <div className="bg-bg-inset/60 rounded-lg p-3 text-center">
      <div className="text-ink-muted text-[10px] tracking-wider uppercase">{label}</div>
      <div className="font-display text-brand-gold mt-1 text-base">{value}</div>
      {sub ? <div className="text-ink-muted mt-0.5 text-[10px]">{sub}</div> : null}
    </div>
  );
}

export { Moon as MoonIcon };