"use client";

import { useState } from "react";
import {
  PageHeader,
  Panel,
  AdminButton,
  StatusBadge,
  StatCard,
} from "@/components/admin/ui";
import { company } from "@/data/company";

const inputClass =
  "w-full rounded-lg border border-border bg-white px-3 py-2 text-sm outline-none focus:border-accent";

export default function AdminSettingsPage() {
  const [general, setGeneral] = useState<{
    name: string;
    shortName: string;
    tagline: string;
    phone: string;
    email: string;
    address: string;
    logo: string;
    favicon: string;
    currency: string;
    timezone: string;
  }>({
    name: company.name,
    shortName: company.shortName,
    tagline: company.tagline,
    phone: company.phone,
    email: "info@gns.pk",
    address: company.branches[0]?.address || "",
    logo: company.logo,
    favicon: "/favicon.ico",
    currency: "PKR",
    timezone: "Asia/Karachi",
  });

  const [emailSettings, setEmailSettings] = useState({
    enabled: true,
    fromName: company.shortName as string,
    fromEmail: "noreply@gns.pk",
    orderNotifications: true,
  });

  const [smsSettings, setSmsSettings] = useState({
    enabled: true,
    provider: "Jazz SMS",
    orderAlerts: true,
  });

  const [maintenance, setMaintenance] = useState(false);
  const [announcements, setAnnouncements] = useState({
    bannerEnabled: true,
    bannerText: "Free delivery on orders over PKR 100,000",
    popupEnabled: false,
    popupText: "Welcome to GNS Glow — summer appliance deals live now.",
  });

  const [saved, setSaved] = useState(false);

  const save = () => {
    setSaved(true);
    window.setTimeout(() => setSaved(false), 2000);
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Settings"
        description="General store configuration, branding, notifications, and maintenance."
        actions={
          <>
            <AdminButton onClick={save}>Save Settings</AdminButton>
            {saved ? <span className="self-center text-xs text-emerald-600">Saved</span> : null}
          </>
        }
      />

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Currency" value={general.currency} />
        <StatCard label="Timezone" value={general.timezone} tone="info" />
        <StatCard label="Maintenance" value={maintenance ? "On" : "Off"} tone={maintenance ? "danger" : "success"} />
        <StatCard label="Announcements" value={announcements.bannerEnabled || announcements.popupEnabled ? "Active" : "Off"} tone="warning" />
      </div>

      <div className="grid gap-4 xl:grid-cols-2">
        <Panel title="General Company Info">
          <div className="space-y-3">
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Company Name</label>
              <input className={inputClass} value={general.name} onChange={(e) => setGeneral({ ...general, name: e.target.value })} />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Short Name</label>
              <input className={inputClass} value={general.shortName} onChange={(e) => setGeneral({ ...general, shortName: e.target.value })} />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Tagline</label>
              <input className={inputClass} value={general.tagline} onChange={(e) => setGeneral({ ...general, tagline: e.target.value })} />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Phone</label>
              <input className={inputClass} value={general.phone} onChange={(e) => setGeneral({ ...general, phone: e.target.value })} />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Email</label>
              <input className={inputClass} value={general.email} onChange={(e) => setGeneral({ ...general, email: e.target.value })} />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Address</label>
              <textarea
                className={`${inputClass} min-h-[80px]`}
                value={general.address}
                onChange={(e) => setGeneral({ ...general, address: e.target.value })}
              />
            </div>
          </div>
        </Panel>

        <Panel title="Branding & Localization">
          <div className="space-y-3">
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Logo URL</label>
              <input className={inputClass} value={general.logo} onChange={(e) => setGeneral({ ...general, logo: e.target.value })} />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Favicon URL</label>
              <input className={inputClass} value={general.favicon} onChange={(e) => setGeneral({ ...general, favicon: e.target.value })} />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Currency</label>
              <select className={inputClass} value={general.currency} onChange={(e) => setGeneral({ ...general, currency: e.target.value })}>
                <option value="PKR">PKR</option>
                <option value="USD">USD</option>
                <option value="AED">AED</option>
              </select>
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Timezone</label>
              <select className={inputClass} value={general.timezone} onChange={(e) => setGeneral({ ...general, timezone: e.target.value })}>
                <option value="Asia/Karachi">Asia/Karachi</option>
                <option value="Asia/Dubai">Asia/Dubai</option>
                <option value="UTC">UTC</option>
              </select>
            </div>
            <div className="rounded-xl border border-border bg-secondary/30 p-3 text-xs text-muted-foreground">
              Logo preview path: {general.logo || "—"}
            </div>
          </div>
        </Panel>

        <Panel title="Email Settings">
          <div className="space-y-3">
            <label className="flex items-center justify-between gap-3 text-sm">
              <span>Enable email notifications</span>
              <input
                type="checkbox"
                checked={emailSettings.enabled}
                onChange={(e) => setEmailSettings({ ...emailSettings, enabled: e.target.checked })}
              />
            </label>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">From Name</label>
              <input className={inputClass} value={emailSettings.fromName} onChange={(e) => setEmailSettings({ ...emailSettings, fromName: e.target.value })} />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">From Email</label>
              <input className={inputClass} value={emailSettings.fromEmail} onChange={(e) => setEmailSettings({ ...emailSettings, fromEmail: e.target.value })} />
            </div>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={emailSettings.orderNotifications}
                onChange={(e) => setEmailSettings({ ...emailSettings, orderNotifications: e.target.checked })}
              />
              Order confirmation emails
            </label>
          </div>
        </Panel>

        <Panel title="SMS Settings">
          <div className="space-y-3">
            <label className="flex items-center justify-between gap-3 text-sm">
              <span>Enable SMS</span>
              <input
                type="checkbox"
                checked={smsSettings.enabled}
                onChange={(e) => setSmsSettings({ ...smsSettings, enabled: e.target.checked })}
              />
            </label>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Provider</label>
              <select className={inputClass} value={smsSettings.provider} onChange={(e) => setSmsSettings({ ...smsSettings, provider: e.target.value })}>
                <option>Jazz SMS</option>
                <option>Telenor SMS</option>
                <option>Twilio</option>
              </select>
            </div>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={smsSettings.orderAlerts}
                onChange={(e) => setSmsSettings({ ...smsSettings, orderAlerts: e.target.checked })}
              />
              Order status SMS alerts
            </label>
          </div>
        </Panel>

        <Panel title="Maintenance Mode">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <p className="text-sm font-semibold">Storefront maintenance</p>
              <p className="text-xs text-muted-foreground">Visitors see a maintenance message while admins retain access.</p>
            </div>
            <div className="flex items-center gap-2">
              <StatusBadge status={maintenance ? "Pending" : "Active"} />
              <AdminButton variant="secondary" onClick={() => setMaintenance((v) => !v)}>
                {maintenance ? "Disable" : "Enable"}
              </AdminButton>
            </div>
          </div>
        </Panel>

        <Panel title="Announcements / Popups">
          <div className="space-y-3">
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={announcements.bannerEnabled}
                onChange={(e) => setAnnouncements({ ...announcements, bannerEnabled: e.target.checked })}
              />
              Enable top banner
            </label>
            <input
              className={inputClass}
              value={announcements.bannerText}
              onChange={(e) => setAnnouncements({ ...announcements, bannerText: e.target.value })}
              disabled={!announcements.bannerEnabled}
            />
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={announcements.popupEnabled}
                onChange={(e) => setAnnouncements({ ...announcements, popupEnabled: e.target.checked })}
              />
              Enable homepage popup
            </label>
            <textarea
              className={`${inputClass} min-h-[80px]`}
              value={announcements.popupText}
              onChange={(e) => setAnnouncements({ ...announcements, popupText: e.target.value })}
              disabled={!announcements.popupEnabled}
            />
          </div>
        </Panel>
      </div>
    </div>
  );
}