"use client";

import { useState, useTransition } from "react";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { updatePlatformSettings } from "@/lib/actions/admin";
import type { PlatformSettings } from "@/lib/queries/system-settings-queries";

interface SystemSettingsFormProps {
  initial: PlatformSettings;
}

export function SystemSettingsForm({ initial }: SystemSettingsFormProps) {
  const [settings, setSettings] = useState(initial);
  const [message, setMessage] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();

  function updateSmtp(field: keyof PlatformSettings["smtp"], value: string | number) {
    setSettings((s) => ({
      ...s,
      smtp: { ...s.smtp, [field]: value },
    }));
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setMessage(null);
    startTransition(async () => {
      const result = await updatePlatformSettings(settings);
      setMessage(result.success ? "Settings saved." : result.error);
    });
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="rounded-lg border border-border bg-card p-5 shadow">
        <h3 className="mb-4 text-sm font-bold text-navy">Platform toggles</h3>
        <div className="space-y-3">
          <label className="flex items-center gap-3 text-sm">
            <input
              type="checkbox"
              checked={settings.signupsEnabled}
              onChange={(e) =>
                setSettings((s) => ({ ...s, signupsEnabled: e.target.checked }))
              }
              className="h-4 w-4 rounded border-border"
            />
            Allow new signups
          </label>
          <label className="flex items-center gap-3 text-sm">
            <input
              type="checkbox"
              checked={settings.maintenanceMode}
              onChange={(e) =>
                setSettings((s) => ({
                  ...s,
                  maintenanceMode: e.target.checked,
                }))
              }
              className="h-4 w-4 rounded border-border"
            />
            Maintenance mode
          </label>
        </div>
      </div>

      <div className="rounded-lg border border-border bg-card p-5 shadow">
        <h3 className="mb-4 text-sm font-bold text-navy">SMTP (email collectors)</h3>
        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label className="mb-1 block text-xs font-semibold text-muted">
              Host
            </label>
            <Input
              value={settings.smtp.host}
              onChange={(e) => updateSmtp("host", e.target.value)}
            />
          </div>
          <div>
            <label className="mb-1 block text-xs font-semibold text-muted">
              Port
            </label>
            <Input
              type="number"
              value={settings.smtp.port}
              onChange={(e) => updateSmtp("port", Number(e.target.value))}
            />
          </div>
          <div>
            <label className="mb-1 block text-xs font-semibold text-muted">
              Username
            </label>
            <Input
              value={settings.smtp.user}
              onChange={(e) => updateSmtp("user", e.target.value)}
            />
          </div>
          <div>
            <label className="mb-1 block text-xs font-semibold text-muted">
              Password
            </label>
            <Input
              type="password"
              value={settings.smtp.password}
              onChange={(e) => updateSmtp("password", e.target.value)}
            />
          </div>
          <div className="sm:col-span-2">
            <label className="mb-1 block text-xs font-semibold text-muted">
              From address
            </label>
            <Input
              value={settings.smtp.from}
              onChange={(e) => updateSmtp("from", e.target.value)}
            />
          </div>
        </div>
      </div>

      {message && (
        <p
          className={`text-sm ${message.includes("saved") ? "text-success" : "text-danger"}`}
        >
          {message}
        </p>
      )}

      <Button type="submit" variant="primary" disabled={pending}>
        {pending ? "Saving…" : "Save settings"}
      </Button>
    </form>
  );
}