"use client";

import * as React from "react";
import {
  ShieldCheck,
  KeyRound,
  Clock,
  Lock,
  Save,
  CheckCircle2,
  AlertTriangle,
} from "lucide-react";

export function SystemSecurityPanel() {
  const [loading, setLoading] = React.useState(true);
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [success, setSuccess] = React.useState<string | null>(null);

  const [require2FA, setRequire2FA] = React.useState(false);
  const [sessionTimeoutHours, setSessionTimeoutHours] = React.useState(24);
  const [maxAttempts, setMaxAttempts] = React.useState(5);

  React.useEffect(() => {
    async function loadSettings() {
      try {
        setLoading(true);
        const res = await fetch("/api/admin/settings");
        if (res.status === 403) {
          setError("Access Denied: Main Administrator privileges required.");
          return;
        }
        if (!res.ok) throw new Error("Failed to load security settings");
        const data = await res.json();
        const s = data.settings;
        if (s) {
          setRequire2FA(!!s.require2FAForAllSubAdmins);
          setSessionTimeoutHours(Math.round((s.sessionTimeoutMinutes || 1440) / 60));
          setMaxAttempts(s.maxLoginAttempts || 5);
        }
      } catch (e) {
        setError((e as Error).message);
      } finally {
        setLoading(false);
      }
    }
    loadSettings();
  }, []);

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    setError(null);
    setSuccess(null);

    try {
      const res = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          require2FAForAllSubAdmins: require2FA,
          sessionTimeoutMinutes: sessionTimeoutHours * 60,
          maxLoginAttempts: maxAttempts,
        }),
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to update settings");

      setSuccess(data.message || "Security settings saved successfully.");
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="max-w-3xl space-y-6">
      {/* Header */}
      <div>
        <div className="flex items-center gap-2">
          <h1 className="font-bold text-xl tracking-tight text-neutral-900 dark:text-white">
            Security Policy & Authentication
          </h1>
          <span className="rounded-full bg-neutral-900 px-2 py-0.5 text-[9px] font-bold text-white uppercase tracking-wider dark:bg-white dark:text-neutral-900">
            Main Admin Only
          </span>
        </div>
        <p className="mt-0.5 text-xs text-neutral-500">
          Enforce organization-wide administrator security standards, session lifetimes, and authentication policies.
        </p>
      </div>

      {error && (
        <div className="rounded-xl border border-red-200 bg-red-50 p-4 text-xs text-red-700 dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-300">
          <div className="flex items-center gap-2 font-semibold">
            <AlertTriangle className="h-4 w-4" />
            <span>Authorization Notice</span>
          </div>
          <p className="mt-1">{error}</p>
        </div>
      )}

      {success && (
        <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-xs text-emerald-800 dark:border-emerald-900/50 dark:bg-emerald-950/50 dark:text-emerald-200">
          <div className="flex items-center gap-2 font-semibold">
            <CheckCircle2 className="h-4 w-4" />
            <span>Success</span>
          </div>
          <p className="mt-1">{success}</p>
        </div>
      )}

      <form onSubmit={handleSave} className="space-y-6">
        <div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-xs dark:border-neutral-800 dark:bg-neutral-900 space-y-6">
          {/* Two-Factor Policy */}
          <div className="flex items-start justify-between gap-4">
            <div>
              <div className="flex items-center gap-2 font-semibold text-xs text-neutral-900 dark:text-white">
                <ShieldCheck className="h-4 w-4 text-neutral-700 dark:text-neutral-300" />
                <span>Mandatory Two-Factor Authentication (2FA)</span>
              </div>
              <p className="mt-1 text-xs text-neutral-500 leading-relaxed max-w-lg">
                When enabled, all Sub-administrators will be prompted to link an authenticator application
                prior to accessing administrative workspaces.
              </p>
            </div>
            <label className="relative inline-flex cursor-pointer items-center">
              <input
                type="checkbox"
                checked={require2FA}
                onChange={(e) => setRequire2FA(e.target.checked)}
                className="peer sr-only"
              />
              <div className="peer h-6 w-11 rounded-full bg-neutral-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-neutral-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-neutral-900 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none dark:bg-neutral-800 dark:peer-checked:bg-white dark:peer-checked:after:border-neutral-900" />
            </label>
          </div>

          <hr className="border-neutral-100 dark:border-neutral-800" />

          {/* Session Timeout */}
          <div>
            <div className="flex items-center gap-2 font-semibold text-xs text-neutral-900 dark:text-white">
              <Clock className="h-4 w-4 text-neutral-700 dark:text-neutral-300" />
              <span>Admin Session Lifetime</span>
            </div>
            <p className="mt-1 text-xs text-neutral-500">
              Maximum active session duration before an administrator must re-authenticate.
            </p>
            <div className="mt-3 flex items-center gap-3">
              <input
                type="number"
                min={1}
                max={168}
                value={sessionTimeoutHours}
                onChange={(e) => setSessionTimeoutHours(parseInt(e.target.value, 10) || 24)}
                className="h-10 w-28 rounded-lg border border-neutral-300 bg-transparent px-3 text-xs text-neutral-900 focus:border-neutral-900 focus:ring-1 focus:ring-neutral-900 focus:outline-none dark:border-neutral-700 dark:text-white dark:focus:border-white dark:focus:ring-white"
              />
              <span className="text-xs text-neutral-500">hours (Default: 24 hours)</span>
            </div>
          </div>

          <hr className="border-neutral-100 dark:border-neutral-800" />

          {/* Brute-Force Rate Limiting */}
          <div>
            <div className="flex items-center gap-2 font-semibold text-xs text-neutral-900 dark:text-white">
              <Lock className="h-4 w-4 text-neutral-700 dark:text-neutral-300" />
              <span>Login Attempt Threshold</span>
            </div>
            <p className="mt-1 text-xs text-neutral-500">
              Maximum consecutive failed login attempts before a security alert is recorded in the audit log.
            </p>
            <div className="mt-3 flex items-center gap-3">
              <input
                type="number"
                min={3}
                max={20}
                value={maxAttempts}
                onChange={(e) => setMaxAttempts(parseInt(e.target.value, 10) || 5)}
                className="h-10 w-28 rounded-lg border border-neutral-300 bg-transparent px-3 text-xs text-neutral-900 focus:border-neutral-900 focus:ring-1 focus:ring-neutral-900 focus:outline-none dark:border-neutral-700 dark:text-white dark:focus:border-white dark:focus:ring-white"
              />
              <span className="text-xs text-neutral-500">attempts</span>
            </div>
          </div>
        </div>

        <div className="flex justify-end">
          <button
            type="submit"
            disabled={saving || loading}
            className="flex h-10 items-center gap-2 rounded-lg bg-neutral-900 px-5 text-xs font-semibold text-white shadow-xs transition hover:bg-neutral-800 disabled:opacity-50 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
          >
            <Save className="h-3.5 w-3.5" />
            <span>{saving ? "Saving Policies..." : "Save Security Policy"}</span>
          </button>
        </div>
      </form>
    </div>
  );
}

export default SystemSecurityPanel;