import type { Metadata } from "next";
import { Search } from "lucide-react";
import { searchDreams, DREAMS } from "@/lib/dreams";
import { AiInsightPanel } from "@/components/ai/insight-panel";

export const metadata: Metadata = {
  title: "Giải Mộng — Tử Vi Số",
  description: "Tra cứu ý nghĩa giấc mơ theo từ khoá — folklore Việt Nam.",
};

type Props = { searchParams: Promise<{ q?: string }> };

export default async function DreamsPage({ searchParams }: Props) {
  const sp = await searchParams;
  const q = (sp.q ?? "").trim();
  const results = q ? searchDreams(q) : [];
  const showcase = q ? null : DREAMS.slice(0, 9);

  return (
    <div className="bg-bg-base min-h-screen">
      <div className="mx-auto max-w-3xl px-4 py-8 lg:py-12">
        <div className="mb-8 text-center">
          <h1 className="font-display text-ink-primary text-3xl font-semibold lg:text-4xl">
            Giải Mộng
          </h1>
          <p className="text-ink-secondary mt-2 text-sm">
            Tra cứu ý nghĩa giấc mơ — folklore dân gian Việt Nam. Kết quả mang tính tham khảo.
          </p>
        </div>

        <form
          method="GET"
          className="border-stroke-subtle bg-bg-elevated/40 mb-6 rounded-xl border p-4"
        >
          <label className="text-ink-muted block text-xs">Mơ thấy gì?</label>
          <div className="relative mt-1.5">
            <Search className="text-ink-muted absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
            <input
              name="q"
              defaultValue={q}
              placeholder="vd: rắn, lửa, người đã mất, bay..."
              className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold w-full rounded-md border py-2.5 pr-3 pl-9 text-sm focus:outline-none"
            />
          </div>
          <button
            type="submit"
            className="bg-brand-gold text-bg-base mt-3 w-full rounded-md px-4 py-2 text-sm font-semibold"
          >
            Tra
          </button>
        </form>

        {q ? (
          <div className="mb-3 text-sm">
            <span className="text-ink-muted">Tìm thấy</span>{" "}
            <span className="text-brand-gold font-semibold">{results.length}</span>{" "}
            <span className="text-ink-muted">kết quả cho</span>{" "}
            <span className="text-ink-primary font-medium">&ldquo;{q}&rdquo;</span>
          </div>
        ) : null}

        <div className="space-y-3">
          {(q ? results : (showcase ?? [])).map((entry) => (
            <article
              key={entry.id}
              className="border-stroke-subtle bg-bg-elevated/40 rounded-xl border p-4 lg:p-5"
            >
              <h3 className="font-display text-brand-gold text-lg font-semibold">{entry.title}</h3>
              <p className="text-ink-secondary mt-2 text-sm leading-relaxed">{entry.meaning}</p>
              {entry.lottery ? (
                <div className="text-ink-muted mt-2 text-xs">
                  Số liên quan (folklore tham khảo, không khuyến khích đánh bạc):{" "}
                  <span className="text-ink-secondary font-mono">{entry.lottery.join(", ")}</span>
                </div>
              ) : null}
            </article>
          ))}
          {q && results.length === 0 ? (
            <div className="border-stroke-subtle text-ink-muted rounded-xl border border-dashed p-8 text-center text-sm">
              Không tìm thấy giấc mơ nào khớp. Thử từ khoá đơn giản hơn (1-2 từ).
            </div>
          ) : null}
        </div>

        {q && results.length > 0 ? (
          <AiInsightPanel
            topic="dream"
            context={{
              keyword: q,
              matches: results.slice(0, 5).map((r) => ({
                title: r.title,
                meaning: r.meaning,
              })),
            }}
            cta={'Hỏi "Thầy" giải mộng sâu hơn'}
            title="Luận giải sâu giấc mơ"
            hint='Phần trên là từ điển folklore. "Thầy" sẽ phân tích thêm theo tâm lý hiện đại và bối cảnh người mơ.'
          />
        ) : null}
      </div>
    </div>
  );
}