import { db } from "@/db";
import { settings } from "@/db/schema";
import { Settings, Save, RefreshCcw, ShieldCheck, Rocket } from "lucide-react";
import { Card, PageTitle, SectionTitle, Field, inputCls, Badge } from "@/components/ui";
import { ActionForm, SubmitBtn } from "@/components/ui-client";
import { updateSettings } from "@/lib/actions";

export const metadata = { title: "تنظیمات" };

const CHANGELOG = [
  { v: "1.0.0", note: "انتشار اول: بانک سوالات، آزمون آنلاین، مسابقه، معما، بازی، نظرسنجی، حضور و غیاب، لوح سپاس و پنل‌های سه‌گانه" },
];

export default async function SettingsPage() {
  const rows = await db.select().from(settings);
  const get = (k: string, d = "") => rows.find((r) => r.key === k)?.value ?? d;

  return (
    <div>
      <PageTitle title="تنظیمات و به‌روزرسانی" subtitle="اطلاعات عمومی مدرسه و وضعیت سامانه" icon={<Settings size={22} />} />

      <Card className="mb-6 p-6">
        <SectionTitle>اطلاعات مدرسه</SectionTitle>
        <ActionForm action={updateSettings} className="grid gap-4 sm:grid-cols-2">
          <Field label="نام مدرسه (در هدر سایت نمایش داده می‌شود)">
            <input name="schoolName" defaultValue={get("schoolName")} className={inputCls} />
          </Field>
          <Field label="شعار / جملهٔ انگیزشی">
            <input name="motto" defaultValue={get("motto")} className={inputCls} />
          </Field>
          <div><SubmitBtn><Save size={15} /> ذخیرهٔ تنظیمات</SubmitBtn></div>
        </ActionForm>
      </Card>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card className="p-6">
          <SectionTitle><span className="flex items-center gap-2"><Rocket size={17} className="text-emerald-700" /> به‌روزرسانی سامانه</span></SectionTitle>
          <div className="flex items-center justify-between rounded-xl bg-emerald-50 px-4 py-3">
            <div>
              <div className="text-sm font-black text-emerald-950">نسخهٔ فعلی: <span dir="ltr">{get("version", "1.0.0")}</span></div>
              <div className="mt-0.5 text-[11px] text-emerald-800/60">پشتیبانی: تیم فنی سامانهٔ مدارس</div>
            </div>
            <Badge tone="green"><ShieldCheck size={12} /> به‌روز است</Badge>
          </div>
          <form className="mt-3">
            <button type="button" className="inline-flex items-center gap-2 rounded-xl border border-emerald-900/15 bg-white px-4 py-2.5 text-xs font-extrabold text-emerald-800 transition hover:bg-emerald-50">
              <RefreshCcw size={14} /> بررسی به‌روزرسانی جدید
            </button>
          </form>
        </Card>
        <Card className="p-6">
          <SectionTitle>تاریخچهٔ نسخه‌ها</SectionTitle>
          <ul className="space-y-2.5">
            {CHANGELOG.map((c) => (
              <li key={c.v} className="rounded-xl border border-emerald-900/10 bg-white px-4 py-3">
                <div className="flex items-center gap-2">
                  <Badge tone="amber">v{c.v}</Badge>
                  <span className="text-xs font-black text-emerald-950">پایدار</span>
                </div>
                <p className="mt-1.5 text-xs leading-6 text-emerald-800/70">{c.note}</p>
              </li>
            ))}
          </ul>
        </Card>
      </div>
    </div>
  );
}