"use client";

/**
 * /admin/water-log/settings
 *
 * Site-admin-facing settings page for the Water Log module. Controls:
 *   - Whether `/water/admin` is enabled
 *   - 4-digit admin PIN (regenerate on demand)
 *   - Session duration (hours)
 *   - Per-coarse-permission flags (edit / delete / export)
 *   - High/low alert phone + enable flag
 *
 * Visual language: Field Almanac. Same cream + forest palette as
 * the main WaterLogAdminPanel, but trimmed to a single column for
 * a focused "form" feel.
 */

import { useReducer, useEffect, useCallback } from "react";
import {
  getWaterAdminSettings,
  saveWaterAdminSettings,
  regenerateAdminPin,
  type AdminSettings,
} from "@/actions/water-log/settings";

const TUXEDO_BRAND_ID = "64294306-5f42-463d-a5e8-2ad6c81a96de";

type Message = { type: "success" | "error"; text: string } | null;

type State = {
  settings: AdminSettings | null;
  loading: boolean;
  saving: boolean;
  regenerating: boolean;
  revealedPin: string | null;
  message: Message;
  enabled: boolean;
  sessionDuration: number;
  canEdit: boolean;
  canDelete: boolean;
  canExport: boolean;
  alertPhone: string;
  alertsEnabled: boolean;
};

type Action =
  | { type: "LOAD_START" }
  | {
      type: "LOAD_SUCCESS";
      data: AdminSettings;
    }
  | { type: "LOAD_DONE" }
  | { type: "SAVE_START" }
  | { type: "SAVE_SUCCESS"; settings: AdminSettings | undefined }
  | { type: "SAVE_FAIL"; message: Message }
  | { type: "SAVE_DONE" }
  | { type: "REGEN_START" }
  | { type: "REGEN_SUCCESS"; pin: string; message: Message }
  | { type: "REGEN_FAIL"; message: Message }
  | { type: "REGEN_DONE" }
  | { type: "DISMISS_PIN" }
  | { type: "CLEAR_MESSAGE" }
  | { type: "SET_ENABLED"; value: boolean }
  | { type: "SET_SESSION_DURATION"; value: number }
  | { type: "SET_CAN_EDIT"; value: boolean }
  | { type: "SET_CAN_DELETE"; value: boolean }
  | { type: "SET_CAN_EXPORT"; value: boolean }
  | { type: "SET_ALERT_PHONE"; value: string }
  | { type: "SET_ALERTS_ENABLED"; value: boolean };

const initialState: State = {
  settings: null,
  loading: true,
  saving: false,
  regenerating: false,
  revealedPin: null,
  message: null,
  enabled: false,
  sessionDuration: 12,
  canEdit: true,
  canDelete: true,
  canExport: true,
  alertPhone: "",
  alertsEnabled: false,
};

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "LOAD_START":
      return { ...state, loading: true };
    case "LOAD_SUCCESS":
      return {
        ...state,
        settings: action.data,
        enabled: action.data.enabled,
        sessionDuration: action.data.sessionDurationHours,
        canEdit: action.data.canEditEntries,
        canDelete: action.data.canDeleteEntries,
        canExport: action.data.canExportCsv,
        alertPhone: action.data.alertPhone ?? "",
        alertsEnabled: action.data.alertsEnabled,
      };
    case "LOAD_DONE":
      return { ...state, loading: false };
    case "SAVE_START":
      return { ...state, saving: true, message: null };
    case "SAVE_SUCCESS":
      return {
        ...state,
        message: { type: "success", text: "Settings saved" },
        settings: action.settings ?? state.settings,
      };
    case "SAVE_FAIL":
      return { ...state, message: action.message };
    case "SAVE_DONE":
      return { ...state, saving: false };
    case "REGEN_START":
      return { ...state, regenerating: true, message: null };
    case "REGEN_SUCCESS":
      return {
        ...state,
        revealedPin: action.pin,
        message: action.message,
      };
    case "REGEN_FAIL":
      return { ...state, message: action.message };
    case "REGEN_DONE":
      return { ...state, regenerating: false };
    case "DISMISS_PIN":
      return { ...state, revealedPin: null };
    case "CLEAR_MESSAGE":
      return { ...state, message: null };
    case "SET_ENABLED":
      return { ...state, enabled: action.value };
    case "SET_SESSION_DURATION":
      return { ...state, sessionDuration: action.value };
    case "SET_CAN_EDIT":
      return { ...state, canEdit: action.value };
    case "SET_CAN_DELETE":
      return { ...state, canDelete: action.value };
    case "SET_CAN_EXPORT":
      return { ...state, canExport: action.value };
    case "SET_ALERT_PHONE":
      return { ...state, alertPhone: action.value };
    case "SET_ALERTS_ENABLED":
      return { ...state, alertsEnabled: action.value };
    default:
      return state;
  }
}

export default function WaterLogSettingsPage() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const {
    settings,
    loading,
    saving,
    regenerating,
    revealedPin,
    message,
    enabled,
    sessionDuration,
    canEdit,
    canDelete,
    canExport,
    alertPhone,
    alertsEnabled,
  } = state;

  const loadSettings = useCallback(async () => {
    dispatch({ type: "LOAD_START" });
    const data = await getWaterAdminSettings(TUXEDO_BRAND_ID);
    if (data) {
      dispatch({ type: "LOAD_SUCCESS", data });
    }
    dispatch({ type: "LOAD_DONE" });
  }, []);

  useEffect(() => {
    // Load on mount — setState-in-effect is intentional here
    // because we're hydrating from server data.
    void loadSettings();
  }, [loadSettings]);

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    dispatch({ type: "SAVE_START" });
    const result = await saveWaterAdminSettings(TUXEDO_BRAND_ID, {
      enabled,
      sessionDurationHours: sessionDuration,
      canEditEntries: canEdit,
      canDeleteEntries: canDelete,
      canExportCsv: canExport,
      alertPhone: alertPhone || null,
      alertsEnabled,
    });
    if (result.success) {
      dispatch({ type: "SAVE_SUCCESS", settings: result.settings });
    } else {
      dispatch({
        type: "SAVE_FAIL",
        message: { type: "error", text: result.error ?? "Save failed" },
      });
    }
    dispatch({ type: "SAVE_DONE" });
  }

  async function handleRegenerate() {
    if (!confirm("Regenerate the admin PIN? All current admin sessions will be signed out.")) {
      return;
    }
    dispatch({ type: "REGEN_START" });
    const result = await regenerateAdminPin(TUXEDO_BRAND_ID);
    if (result.success && result.pin) {
      dispatch({
        type: "REGEN_SUCCESS",
        pin: result.pin,
        message: {
          type: "success",
          text: "New PIN generated. Save it now — it will not be shown again.",
        },
      });
    } else {
      dispatch({
        type: "REGEN_FAIL",
        message: { type: "error", text: result.error ?? "Failed to regenerate PIN" },
      });
    }
    dispatch({ type: "REGEN_DONE" });
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-[#fdfaf2] flex items-center justify-center font-sans text-[#1d1d1f]">
        <span className="text-[#5a5d5a]">Loading…</span>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#fdfaf2] font-sans text-[#1d1d1f]">
      {/* Header */}
      <div className="border-b border-[#d4d9d3] bg-white">
        <div className="mx-auto max-w-2xl px-6 py-6">
          <p className="text-[10px] font-mono uppercase tracking-[0.3em] text-[#8a6b3b]">§ 04 — Settings</p>
          <h1
            className="mt-2 text-3xl font-medium text-[#1a4d2e]"
            style={{ fontFamily: "var(--font-display, Georgia, serif)" }}
          >
            Water Log · Admin Portal
          </h1>
          <p className="mt-2 text-sm text-[#5a5d5a]">
            Configure PIN access for the field admin portal at <code className="rounded bg-[#f4f1e8] px-1 py-0.5 font-mono text-xs">/water/admin</code>.
            This is separate from the platform admin login.
          </p>
        </div>
      </div>

      <div className="mx-auto max-w-2xl px-6 py-8">
        <form onSubmit={handleSave} className="space-y-6">
          {message && (
            <div
              className={`rounded-lg border px-4 py-3 text-sm font-medium ${
                message.type === "success"
                  ? "border-[#1a4d2e] bg-[#1a4d2e]/5 text-[#1a4d2e]"
                  : "border-[#a4452b] bg-[#a4452b]/5 text-[#a4452b]"
              }`}
            >
              {message.text}
            </div>
          )}

          {/* Enable toggle */}
          <Card title="Admin Portal" subtitle="PIN-based access to /water/admin">
            <ToggleRow
              label="Enable"
              description="Allow water admins to sign in with a 4-digit PIN."
              value={enabled}
              onChange={(value) => dispatch({ type: "SET_ENABLED", value })}
            />
          </Card>

          {enabled && (
            <>
              {/* PIN */}
              <Card title="Admin PIN" subtitle="4-digit PIN required for /water/admin sign-in">
                {revealedPin ? (
                  <div className="space-y-3">
                    <p className="text-xs font-mono uppercase tracking-wider text-[#8a6b3b]">
                      New PIN — write it down
                    </p>
                    <div className="rounded-lg border border-[#1a4d2e] bg-[#1a4d2e]/5 px-6 py-4 text-center">
                      <span
                        className="font-mono text-4xl font-bold tracking-[0.4em] text-[#1a4d2e]"
                        aria-label={`PIN: ${revealedPin.split("").join(" ")}`}
                      >
                        {revealedPin}
                      </span>
                    </div>
                    <button
                      type="button"
                      onClick={() => dispatch({ type: "DISMISS_PIN" })}
                      className="text-xs font-medium text-[#5a5d5a] underline-offset-2 hover:underline"
                    >
                      I&apos;ve saved it — dismiss
                    </button>
                  </div>
                ) : (
                  <div className="flex items-center justify-between gap-3">
                    <p className="text-sm text-[#5a5d5a]">
                      {settings?.pin === null
                        ? "Generate a new PIN to give to your water admin."
                        : "A PIN is already configured. Regenerate to issue a new one (this signs out existing admin sessions)."}
                    </p>
                    <button
                      type="button"
                      onClick={handleRegenerate}
                      disabled={regenerating}
                      className="shrink-0 rounded-lg border border-[#1a4d2e] bg-[#1a4d2e] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#143d24] disabled:opacity-50"
                    >
                      {regenerating ? "Generating…" : "Regenerate PIN"}
                    </button>
                  </div>
                )}
              </Card>

              {/* Session Duration */}
              <Card title="Session Duration" subtitle="How long the admin session lasts after sign-in (1–168 hours)">
                <div className="flex items-center gap-4">
                  <input
                    type="range"
                    min={1}
                    max={168}
                    value={sessionDuration}
                    onChange={(e) =>
                      dispatch({
                        type: "SET_SESSION_DURATION",
                        value: parseInt(e.target.value, 10),
                      })
                    }
                    className="flex-1 accent-[#1a4d2e]"
                    aria-label="Session duration in hours"
                  />
                  <span className="w-20 rounded border border-[#d4d9d3] bg-white px-3 py-1.5 text-center font-mono text-sm font-semibold">
                    {sessionDuration}h
                  </span>
                </div>
              </Card>

              {/* Permissions */}
              <Card title="Permissions" subtitle="Coarse-grained flags. The PIN sign-in gates the portal; these flags gate specific actions.">
                <div className="divide-y divide-[#d4d9d3]">
                  <ToggleRow
                    label="Edit entries"
                    description="Allow modifying existing log entries."
                    value={canEdit}
                    onChange={(value) => dispatch({ type: "SET_CAN_EDIT", value })}
                  />
                  <ToggleRow
                    label="Delete entries"
                    description="Allow removing log entries."
                    value={canDelete}
                    onChange={(value) => dispatch({ type: "SET_CAN_DELETE", value })}
                  />
                  <ToggleRow
                    label="Export CSV"
                    description="Allow exporting water log data."
                    value={canExport}
                    onChange={(value) => dispatch({ type: "SET_CAN_EXPORT", value })}
                  />
                </div>
              </Card>

              {/* High/Low Alerts */}
              <Card title="High / Low Alerts" subtitle="SMS a phone when a reading exceeds a headgate's thresholds.">
                <ToggleRow
                  label="Enable alerts"
                  description="Threshold breach notifications."
                  value={alertsEnabled}
                  onChange={(value) => dispatch({ type: "SET_ALERTS_ENABLED", value })}
                />
                {alertsEnabled && (
                  <div className="mt-4">
                    <label htmlFor="water-alert-phone" className="block text-xs font-medium text-[#5a5d5a]">
                      Alert phone number
                    </label>
                    <input aria-label="+13035551234"
                      id="water-alert-phone"
                      type="tel"
                      value={alertPhone}
                      onChange={(e) =>
                        dispatch({ type: "SET_ALERT_PHONE", value: e.target.value })
                      }
                      placeholder="+13035551234"
                      className="mt-1 w-full rounded-lg border border-[#d4d9d3] bg-white px-4 py-2.5 text-base outline-none focus:border-[#1a4d2e] focus:ring-1 focus:ring-[#1a4d2e]"
                      autoComplete="tel"
                    />
                    <p className="mt-1 text-xs text-[#8a8b88]">
                      U.S. format recommended. Include country code (e.g. <span className="font-mono">+1</span> for USA).
                    </p>
                  </div>
                )}
              </Card>
            </>
          )}

          <button
            type="submit"
            disabled={saving}
            className="w-full rounded-lg bg-[#1a4d2e] px-6 py-3.5 text-sm font-semibold uppercase tracking-wider text-white transition hover:bg-[#143d24] disabled:opacity-50"
          >
            {saving ? "Saving…" : "Save Settings"}
          </button>
        </form>
      </div>
    </div>
  );
}

function Card({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <section className="rounded-xl border border-[#d4d9d3] bg-white p-5 shadow-sm">
      <header className="mb-4">
        <h2 className="text-base font-semibold text-[#1d1d1f]">{title}</h2>
        {subtitle && <p className="mt-0.5 text-xs text-[#5a5d5a]">{subtitle}</p>}
      </header>
      {children}
    </section>
  );
}

function ToggleRow({
  label,
  description,
  value,
  onChange,
}: {
  label: string;
  description?: string;
  value: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <div className="flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0">
      <div className="min-w-0 flex-1">
        <p className="text-sm font-medium text-[#1d1d1f]">{label}</p>
        {description && <p className="mt-0.5 text-xs text-[#5a5d5a]">{description}</p>}
      </div>
      <button
        type="button"
        role="switch"
        aria-checked={value}
        aria-label={label}
        onClick={() => onChange(!value)}
        className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors ${
          value ? "bg-[#1a4d2e]" : "bg-[#d4d9d3]"
        }`}
      >
        <span
          className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${
            value ? "translate-x-6" : "translate-x-1"
          }`}
        />
      </button>
    </div>
  );
}