import AdminNav from '@/components/AdminNav';
import { getSiteSettings, DEFAULT_MAINTENANCE_MESSAGE } from '@/lib/settings';
import { setMaintenance } from './actions';

export default async function MaintenancePage() {
  const { maintenanceMode, maintenanceMessage } = await getSiteSettings();

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <AdminNav />
      <div className="flex items-baseline justify-between gap-3">
        <h1 className="font-display text-3xl">Maintenance mode</h1>
        <span
          className={`tag-label rounded-full px-3 py-1 ${
            maintenanceMode ? 'bg-splash-pink/10 text-splash-pink' : 'bg-splash-blue/10 text-splash-blue'
          }`}
        >
          {maintenanceMode ? 'ON — site is hidden' : 'OFF — site is live'}
        </span>
      </div>
      <p className="mt-2 text-sm text-muted">
        When on, customers see a &quot;we&apos;re updating&quot; page instead of the shop. You (while
        logged in here) still see the real site, and can always get back to this page to turn it off.
      </p>

      <form action={setMaintenance} className="mt-10 space-y-6">
        <div>
          <label htmlFor="message" className="tag-label mb-2 block">
            Message shown to customers
          </label>
          <textarea
            id="message"
            name="message"
            rows={3}
            defaultValue={maintenanceMessage ?? ''}
            placeholder={DEFAULT_MAINTENANCE_MESSAGE}
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          />
          <p className="mt-1 text-xs text-muted">Leave blank to use the default message shown above.</p>
        </div>

        <div className="flex flex-wrap gap-3">
          {maintenanceMode ? (
            <>
              <button
                type="submit"
                name="enable"
                value="0"
                className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
              >
                Turn maintenance OFF
              </button>
              <button
                type="submit"
                name="enable"
                value="1"
                className="border border-line px-6 py-3 text-sm hover:border-clay hover:text-clay"
              >
                Save message (keep ON)
              </button>
            </>
          ) : (
            <button
              type="submit"
              name="enable"
              value="1"
              className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
            >
              Turn maintenance ON
            </button>
          )}
        </div>
      </form>
    </div>
  );
}
