import { DataTable } from "@/components/admin/DataTable";
import { AdminPageHeader, AdminTextCell } from "@/components/admin/AdminPresentation";
import { prisma } from "@/lib/prisma";
import { brand } from "@/lib/brand";

export default async function SettingsPage() {
  const settings = await prisma.siteSetting.findMany();
  return (
    <section>
      <AdminPageHeader title="Settings" subtitle="Read-only storefront configuration reference for this build." />
      <div className="panel mt-5 grid gap-4 p-5 md:grid-cols-2">
        <h2 className="font-heading text-xl font-black md:col-span-2">Storefront Settings</h2>
        <label>Brand name<input defaultValue={brand.name} readOnly /></label>
        <label>Support email<input defaultValue={brand.supportEmail} readOnly /></label>
        <label>Support phone<input defaultValue="(800) 000-0000" readOnly /></label>
        <label>Top bar message<input defaultValue="Secure online bullion purchasing" readOnly /></label>
        <label>Free shipping message<input defaultValue="Free insured fulfillment coordination on qualifying orders" readOnly /></label>
        <label>Gold reference<input defaultValue="$4,100.00" readOnly /></label>
        <label>Silver reference<input defaultValue="$60.00" readOnly /></label>
        <label>Platinum reference<input defaultValue="$1,640.00" readOnly /></label>
        <label>Last updated<input defaultValue="Updated manually" readOnly /></label>
        <label>Market strip enabled<select defaultValue="true" disabled><option value="true">Enabled</option><option value="false">Disabled</option></select></label>
        <label>Service pages enabled<select defaultValue="true" disabled><option value="true">Enabled</option><option value="false">Disabled</option></select></label>
        <label>Admin shortcut<select defaultValue="false" disabled><option value="true">Enabled</option><option value="false">Disabled</option></select></label>
        <p className="text-sm text-[#666] md:col-span-2">Read-only controls for this build. Persist editable settings through SiteSetting records in the next admin iteration.</p>
      </div>
      <div className="mt-6">
        <h2 className="font-heading text-xl font-black">Stored Settings</h2>
        <p className="mt-1 text-sm text-[#666]">Current SiteSetting records available to the admin build.</p>
        <div className="mt-3"><DataTable headers={["Key", "Value"]} rows={settings.map((s) => [
          <AdminTextCell key="key" value={s.key} className="max-w-[240px] font-black" />,
          <AdminTextCell key="value" value={s.value} className="max-w-[520px] text-[#666]" />
        ])} /></div>
      </div>
      <div className="panel mt-5 p-5 text-[#666]">
        <h2 className="font-heading text-xl font-black text-[#171717]">Deployment Notes</h2>
        <p className="mt-2">HTTPS/HSTS, Cloudflare, real payment credentials, upload storage, rate limiting, monitoring, backups, and legal review are tracked for production readiness.</p>
      </div>
    </section>
  );
}