import type { Metadata } from "next";
import Link from "next/link";
import { redirect } from "next/navigation";
import { Plus, Star, Trash2, BookOpen, MessageSquare } from "lucide-react";
import { prisma } from "@/lib/db";
import { currentUser, inputToSearchParams, chartInputFrom, TIME_INDEX_LABELS } from "@/lib/charts";
import { ShareToggle } from "@/components/charts/share-toggle";
import { deleteChartAction, setDefaultAction, renameChartAction } from "./_actions";

export const metadata: Metadata = {
  title: "Lá số của tôi — Tử Vi Số",
  description: "Quản lý các lá số đã lưu, chia sẻ link công khai và truy cập nhanh.",
};

export const dynamic = "force-dynamic";

export default async function MyChartsPage() {
  const user = await currentUser();
  if (!user) {
    redirect("/login?from=/la-so");
  }

  const charts = await prisma.chart.findMany({
    where: { userId: user.id },
    orderBy: [{ isDefault: "desc" }, { updatedAt: "desc" }],
    select: {
      id: true,
      label: true,
      fullName: true,
      birthDate: true,
      birthTime: true,
      gender: true,
      isLunar: true,
      shareToken: true,
      isDefault: true,
      createdAt: true,
      updatedAt: true,
      _count: { select: { conversations: true } },
    },
  });

  return (
    <div className="bg-bg-base min-h-screen">
      <div className="mx-auto max-w-5xl px-4 py-8 lg:py-12">
        <div className="mb-6 flex items-end justify-between gap-3">
          <div>
            <div className="ornament-line text-brand-gold-soft mb-2 text-xs tracking-[0.22em] uppercase">
              Bộ sưu tập
            </div>
            <h1 className="font-display text-ink-primary text-3xl font-semibold lg:text-4xl">
              Lá số của tôi
            </h1>
            <p className="text-ink-secondary mt-2 text-sm">
              {charts.length} lá số đã lưu. Có thể tạo link chia sẻ công khai (chỉ-đọc) cho bất kỳ
              lá số nào.
            </p>
          </div>
          <Link
            href="/tu-vi-tron-doi"
            className="bg-brand-gold text-bg-base inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-semibold"
          >
            <Plus className="h-4 w-4" />
            Lập lá số mới
          </Link>
        </div>

        {charts.length === 0 ? (
          <div className="border-stroke-subtle bg-bg-elevated/40 rounded-2xl border border-dashed p-12 text-center">
            <div className="font-display text-ink-secondary mb-2 text-lg">Chưa có lá số nào</div>
            <p className="text-ink-muted mb-5 text-sm">
              Lập lá số tử vi đầu tiên rồi quay lại đây để lưu hoặc chia sẻ.
            </p>
            <Link
              href="/tu-vi-tron-doi"
              className="bg-brand-gold text-bg-base inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-semibold"
            >
              <Plus className="h-4 w-4" />
              Bắt đầu
            </Link>
          </div>
        ) : (
          <div className="space-y-3">
            {charts.map((chart) => {
              const input = chartInputFrom(chart);
              const params = inputToSearchParams(input).toString();
              const viewHref = `/tu-vi-tron-doi?${params}`;
              const aiHref = `/la-so/own/${chart.id}`;
              return (
                <article
                  key={chart.id}
                  id={`chart-${chart.id}`}
                  className={`border-stroke-subtle bg-bg-elevated/40 rounded-xl border p-4 lg:p-5 ${
                    chart.isDefault ? "border-brand-gold/40" : ""
                  }`}
                >
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2">
                        {chart.isDefault ? (
                          <Star
                            className="text-brand-gold h-4 w-4"
                            fill="currentColor"
                            aria-label="Mặc định"
                          />
                        ) : null}
                        <form action={renameChartAction} className="inline-flex items-center gap-1">
                          <input type="hidden" name="id" value={chart.id} />
                          <input
                            name="label"
                            defaultValue={chart.label}
                            className="font-display text-ink-primary bg-transparent text-lg font-semibold focus:underline focus:outline-none"
                            maxLength={80}
                          />
                        </form>
                      </div>
                      <p className="text-ink-secondary mt-1 text-xs">
                        {chart.fullName} · {chart.gender === "FEMALE" ? "Nữ" : "Nam"} ·{" "}
                        {chart.birthDate.toLocaleDateString("vi-VN", {
                          day: "2-digit",
                          month: "2-digit",
                          year: "numeric",
                        })}{" "}
                        · {chart.birthTime} (
                        {TIME_INDEX_LABELS[input.timeIndex]?.split(" ")[0] ?? ""}) ·{" "}
                        {chart.isLunar ? "Âm lịch" : "Dương lịch"}
                      </p>
                      <p className="text-ink-muted mt-1 text-[11px]">
                        Lưu {chart.createdAt.toLocaleDateString("vi-VN")}
                        {chart._count.conversations > 0
                          ? ` · ${chart._count.conversations} hội thoại "Thầy"`
                          : ""}
                      </p>
                    </div>

                    <div className="flex flex-wrap items-center gap-1.5">
                      <Link
                        href={viewHref}
                        className="border-stroke-default text-ink-secondary hover:border-brand-gold/50 hover:text-brand-gold inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs"
                      >
                        <BookOpen className="h-3 w-3" />
                        Xem
                      </Link>
                      <Link
                        href={aiHref}
                        className="border-stroke-default text-ink-secondary hover:border-brand-gold/50 hover:text-brand-gold inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs"
                      >
                        <MessageSquare className="h-3 w-3" />
                        Hỏi &ldquo;Thầy&rdquo;
                      </Link>
                      <ShareToggle chartId={chart.id} shareToken={chart.shareToken} />
                      {!chart.isDefault ? (
                        <form action={setDefaultAction} className="inline">
                          <input type="hidden" name="id" value={chart.id} />
                          <button
                            type="submit"
                            className="border-stroke-default text-ink-muted hover:border-brand-gold/40 hover:text-brand-gold inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs"
                            title="Đặt làm lá số mặc định"
                          >
                            <Star className="h-3 w-3" />
                            Mặc định
                          </button>
                        </form>
                      ) : null}
                      <form
                        action={deleteChartAction}
                        className="inline"
                        onSubmit={(e) => {
                          if (!confirm(`Xoá lá số "${chart.label}"? Không thể khôi phục.`)) {
                            e.preventDefault();
                          }
                        }}
                      >
                        <input type="hidden" name="id" value={chart.id} />
                        <button
                          type="submit"
                          className="border-stroke-default text-ink-muted hover:border-brand-red/40 hover:text-brand-red-light inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs"
                          aria-label={`Xoá ${chart.label}`}
                        >
                          <Trash2 className="h-3 w-3" />
                        </button>
                      </form>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        )}

        <p className="text-ink-muted mt-8 text-center text-[11px]">
          Lá số chia sẻ chỉ-đọc — không hiển thị họ tên, không cho phép chỉnh sửa, không lưu lịch sử
          hội thoại &ldquo;Thầy&rdquo; của chủ.
        </p>
      </div>
    </div>
  );
}