import { getDb } from "@/lib/db";
import { PageTitle, Card, Badge, Empty, fmtDate } from "@/components/panel/ui";
import { InquiryToggle } from "@/components/panel/AdminActions";

export default async function AdminInquiriesPage() {
  const db = await getDb();

  return (
    <>
      <PageTitle
        title="Inquiries"
        sub="Everything submitted through the website contact form lands here."
      />
      {db.inquiries.length === 0 ? (
        <Card>
          <Empty text="No inquiries yet." />
        </Card>
      ) : (
        <div className="grid gap-4">
          {db.inquiries.map((q) => (
            <Card key={q.id} className="p-6">
              <div className="flex flex-wrap items-start justify-between gap-4">
                <div>
                  <div className="flex flex-wrap items-center gap-3">
                    <h2 className="font-semibold text-thi">{q.name}</h2>
                    <Badge value={q.status} />
                  </div>
                  <p className="mt-0.5 text-[0.85rem] text-tmid">
                    {q.company} ·{" "}
                    <a href={`mailto:${q.email}`} className="text-ice hover:underline">
                      {q.email}
                    </a>
                    {q.phone ? ` · ${q.phone}` : ""}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <span className="font-[family-name:var(--font-mono)] text-[0.75rem] text-tlo tnum">
                    {fmtDate(q.at)}
                  </span>
                  <InquiryToggle id={q.id} status={q.status} />
                </div>
              </div>
              <div className="mt-4 flex flex-wrap gap-2">
                {q.service && (
                  <span className="rounded-full border border-azure/30 px-3 py-1 font-[family-name:var(--font-mono)] text-[0.72rem] text-azure-bright">
                    {q.service}
                  </span>
                )}
                {q.budget && (
                  <span className="rounded-full border border-ice/30 px-3 py-1 font-[family-name:var(--font-mono)] text-[0.72rem] text-ice">
                    {q.budget}
                  </span>
                )}
              </div>
              <p className="mt-4 max-w-[80ch] whitespace-pre-wrap rounded-lg border border-white/5 bg-white/[0.03] p-4 text-[0.92rem] leading-relaxed text-tmid">
                {q.message}
              </p>
            </Card>
          ))}
        </div>
      )}
    </>
  );
}