import { Check, X } from "lucide-react";
import type { FengShuiResult } from "@/lib/feng-shui/bat-trach";
import { buildRoomPlacement, type RoomGuide } from "@/lib/feng-shui/room-placement";
import { cn } from "@/lib/utils";

/**
 * Per-room placement guide — shows for each of the 8 rooms:
 *   - 1-3 best directions (with fortune)
 *   - 1-3 worst directions to avoid
 *   - Vietnamese rationale + practical placement note
 *
 * Pure server component. Consumer passes a precomputed FengShuiResult.
 */
export function RoomPlacementTable({ result }: { result: FengShuiResult }) {
  const rooms = buildRoomPlacement(result);

  return (
    <section className="border-stroke-default bg-bg-elevated/40 rounded-2xl border p-5 lg:p-7">
      <header className="mb-5">
        <h3 className="font-display text-lg font-semibold lg:text-xl">
          Bố trí từng phòng theo cung <span className="text-brand-gold">{result.cungMenh}</span>
        </h3>
        <p className="text-ink-muted mt-1 text-xs">
          Mỗi phòng có nguyên tắc riêng — phòng ngủ ưu tiên Diên Niên, bếp toạ hung hướng cát, vệ
          sinh đặt ở hung để dập uế khí.
        </p>
      </header>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-2">
        {rooms.map((r) => (
          <RoomCard key={r.key} room={r} />
        ))}
      </div>
    </section>
  );
}

function RoomCard({ room }: { room: RoomGuide }) {
  return (
    <article className="border-stroke-subtle/70 bg-bg-base/60 rounded-xl border p-4">
      <header className="mb-3 flex items-baseline gap-2">
        <span className="text-2xl leading-none" aria-hidden="true">
          {room.glyph}
        </span>
        <h4 className="font-display text-ink-primary text-base font-semibold">{room.name}</h4>
      </header>

      <p className="text-ink-secondary mb-3 text-xs leading-relaxed">{room.rationale}</p>

      <DirectionRow
        label="Đặt tại / quay về"
        directions={room.bestDirections.map((d) => ({
          dir: d.direction,
          fortune: d.fortune,
          good: d.isAuspicious,
        }))}
        good
      />
      <DirectionRow
        label={room.key === "bep" ? "Thân bếp đặt tại" : "Tránh"}
        directions={room.worstDirections.map((d) => ({
          dir: d.direction,
          fortune: d.fortune,
          good: d.isAuspicious,
        }))}
        good={false}
      />

      <p className="text-ink-muted/90 mt-3 border-t border-stone-700/50 pt-3 text-[11px] leading-relaxed">
        💡 {room.practicalNote}
      </p>
    </article>
  );
}

function DirectionRow({
  label,
  directions,
  good,
}: {
  label: string;
  directions: Array<{ dir: string; fortune: string; good: boolean }>;
  good: boolean;
}) {
  if (directions.length === 0) return null;
  return (
    <div className="mb-2 flex flex-wrap items-center gap-2">
      <span
        className={cn(
          "inline-flex items-center gap-1 text-[10px] font-semibold tracking-[0.12em] uppercase",
          good ? "text-emerald-300" : "text-rose-300"
        )}
      >
        {good ? <Check className="h-3 w-3" /> : <X className="h-3 w-3" />}
        {label}
      </span>
      <div className="flex flex-wrap gap-1.5">
        {directions.map((d) => (
          <span
            key={d.dir}
            className={cn(
              "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px]",
              d.good
                ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
                : "border-rose-500/30 bg-rose-500/10 text-rose-200"
            )}
            title={d.fortune}
          >
            <span className="font-medium">{d.dir}</span>
            <span className="text-[10px] opacity-70">· {d.fortune}</span>
          </span>
        ))}
      </div>
    </div>
  );
}