"use client";

/**
 * WaterLogAdminPanel — the main Water Log admin dashboard.
 *
 * Visual language: "Field Almanac." A rugged, light-themed almanac of
 * the day's water use. The aesthetic borrows from USDA agricultural
 * bulletins and old USGS survey markers — serif display type (Fraunces)
 * for titles, mono (Fragment Mono) for measurements, and a single
 * custom SVG (WaterGauge) that becomes the visual signature of the
 * whole feature.
 *
 *   - No purple-gradient SaaS look.
 *   - No glassmorphism. Strong borders, not soft shadows.
 *   - Field-notebook tone: precise, agricultural, slightly utilitarian.
 *   - Cream + forest + clay palette pulled from the project's existing
 *     `forest` / `sage` / `gold` tokens so the panel sits naturally
 *     inside the rest of /admin.
 *
 * The component is "use client" because it owns the filters and the
 * entry-adding modals. All DB access happens through server actions in
 * `src/actions/water-log/admin.ts`.
 */

import { useReducer, useEffect, useMemo } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  createWaterHeadgate,
  createWaterUser,
  deleteWaterHeadgate,
  deleteWaterUser,
  getWaterEntries,
  regenerateHeadgateToken,
  resetWaterIrrigatorPin,
  type AdminEntry,
  type AdminHeadgate,
  type AdminIrrigator,
} from "@/actions/water-log/admin";
import {
  downloadWaterLogCSV,
  filterWaterLogEntries,
  formatDailyWaterReport,
  isInIrrigationSeason,
  shapeWaterLogEntry,
  type IrrigationSeasonSettings,
  type WaterLogFilter,
  type WaterLogReportRow,
} from "@/lib/water-log-reporting";
import { WaterGauge, SeasonMark } from "@/components/water/icons";
import AdminButton from "./design-system/AdminButton";
import { formatDate, formatDateTime } from "@/lib/format-date";

const DEFAULT_SEASON: IrrigationSeasonSettings = {
  seasonStartMonth: 3,
  seasonStartDay: 15,
  seasonEndMonth: 10,
  seasonEndDay: 15,
};

type Toast = { msg: string; kind: "ok" | "err" };
type HgForm = { name: string; unit: string; notes: string };
type UserForm = {
  name: string;
  role: "irrigator" | "water_admin";
  lang: string;
  phone: string;
};
type PinInfo = { name: string; pin: string };

type State = {
  headgates: AdminHeadgate[];
  users: AdminIrrigator[];
  entries: AdminEntry[];
  toast: Toast | null;
  forms: {
    showAddHg: boolean;
    newHg: HgForm;
    savingHg: boolean;
    showAddUser: boolean;
    newUser: UserForm;
    savingUser: boolean;
    newPin: PinInfo | null;
    resetPin: PinInfo | null;
  };
  filters: {
    dateFrom: string;
    dateTo: string;
    headgate: string;
    user: string;
    via: string;
  };
  csvLoading: boolean;
  today: string;
  todayLabel: string;
  showReportSettings: boolean;
  seasonStart: IrrigationSeasonSettings;
  recipientName: string;
};

type Action =
  // Headgates
  | { type: "ADD_HEADGATE"; headgate: AdminHeadgate }
  | { type: "REMOVE_HEADGATE"; id: string }
  | { type: "UPDATE_HEADGATE_TOKEN"; id: string; token: string }
  // Users
  | { type: "ADD_USER"; user: AdminIrrigator }
  | { type: "DEACTIVATE_USER"; id: string }
  // Toast
  | { type: "SET_TOAST"; toast: Toast }
  | { type: "CLEAR_TOAST" }
  // Forms - Headgate
  | { type: "TOGGLE_ADD_HG" }
  | { type: "SET_NEW_HG_NAME"; value: string }
  | { type: "SET_NEW_HG_UNIT"; value: string }
  | { type: "SET_NEW_HG_NOTES"; value: string }
  | { type: "RESET_NEW_HG" }
  | { type: "SET_SAVING_HG"; value: boolean }
  // Forms - User
  | { type: "TOGGLE_ADD_USER" }
  | { type: "SET_NEW_USER_NAME"; value: string }
  | { type: "SET_NEW_USER_ROLE"; value: "irrigator" | "water_admin" }
  | { type: "SET_NEW_USER_LANG"; value: string }
  | { type: "SET_NEW_USER_PHONE"; value: string }
  | { type: "RESET_NEW_USER" }
  | { type: "SET_SAVING_USER"; value: boolean }
  | { type: "SET_NEW_PIN"; pin: PinInfo }
  | { type: "CLEAR_NEW_PIN" }
  | { type: "SET_RESET_PIN"; pin: PinInfo }
  | { type: "CLEAR_RESET_PIN" }
  // Filters
  | { type: "SET_FILTER_DATE_FROM"; value: string }
  | { type: "SET_FILTER_DATE_TO"; value: string }
  | { type: "SET_FILTER_HEADGATE"; value: string }
  | { type: "SET_FILTER_USER"; value: string }
  | { type: "SET_FILTER_VIA"; value: string }
  | { type: "CLEAR_FILTERS" }
  // Misc UI
  | { type: "SET_CSV_LOADING"; value: boolean }
  | { type: "SET_TODAY"; today: string; label: string }
  | { type: "TOGGLE_REPORT_SETTINGS" }
  | { type: "SET_SEASON_START"; value: IrrigationSeasonSettings }
  | { type: "SET_RECIPIENT_NAME"; value: string };

function initSeasonStart(): IrrigationSeasonSettings {
  if (typeof window === "undefined") return DEFAULT_SEASON;
  try {
    const saved = localStorage.getItem("wl_season_settings:v1");
    return saved ? { ...DEFAULT_SEASON, ...JSON.parse(saved) } : DEFAULT_SEASON;
  } catch {
    return DEFAULT_SEASON;
  }
}

function initRecipientName(): string {
  if (typeof window === "undefined") return "";
  return localStorage.getItem("wl_recipient_name") ?? "";
}

function initState(props: {
  initialHeadgates: AdminHeadgate[];
  initialUsers: AdminIrrigator[];
  initialEntries: AdminEntry[];
}): State {
  return {
    headgates: props.initialHeadgates,
    users: props.initialUsers,
    entries: props.initialEntries,
    toast: null,
    forms: {
      showAddHg: false,
      newHg: { name: "", unit: "CFS", notes: "" },
      savingHg: false,
      showAddUser: false,
      newUser: { name: "", role: "irrigator", lang: "en", phone: "" },
      savingUser: false,
      newPin: null,
      resetPin: null,
    },
    filters: { dateFrom: "", dateTo: "", headgate: "", user: "", via: "" },
    csvLoading: false,
    today: "",
    todayLabel: "",
    showReportSettings: false,
    seasonStart: initSeasonStart(),
    recipientName: initRecipientName(),
  };
}

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "ADD_HEADGATE":
      return { ...state, headgates: [action.headgate, ...state.headgates] };
    case "REMOVE_HEADGATE":
      return {
        ...state,
        headgates: state.headgates.filter((h) => h.id !== action.id),
      };
    case "UPDATE_HEADGATE_TOKEN":
      return {
        ...state,
        headgates: state.headgates.map((h) =>
          h.id === action.id ? { ...h, headgate_token: action.token } : h,
        ),
      };
    case "ADD_USER":
      return { ...state, users: [action.user, ...state.users] };
    case "DEACTIVATE_USER":
      return {
        ...state,
        users: state.users.map((u) =>
          u.id === action.id ? { ...u, active: false } : u,
        ),
      };
    case "SET_TOAST":
      return { ...state, toast: action.toast };
    case "CLEAR_TOAST":
      return { ...state, toast: null };
    case "TOGGLE_ADD_HG":
      return {
        ...state,
        forms: { ...state.forms, showAddHg: !state.forms.showAddHg },
      };
    case "SET_NEW_HG_NAME":
      return {
        ...state,
        forms: {
          ...state.forms,
          newHg: { ...state.forms.newHg, name: action.value },
        },
      };
    case "SET_NEW_HG_UNIT":
      return {
        ...state,
        forms: {
          ...state.forms,
          newHg: { ...state.forms.newHg, unit: action.value },
        },
      };
    case "SET_NEW_HG_NOTES":
      return {
        ...state,
        forms: {
          ...state.forms,
          newHg: { ...state.forms.newHg, notes: action.value },
        },
      };
    case "RESET_NEW_HG":
      return {
        ...state,
        forms: {
          ...state.forms,
          newHg: { name: "", unit: "CFS", notes: "" },
          showAddHg: false,
        },
      };
    case "SET_SAVING_HG":
      return {
        ...state,
        forms: { ...state.forms, savingHg: action.value },
      };
    case "TOGGLE_ADD_USER":
      return {
        ...state,
        forms: { ...state.forms, showAddUser: !state.forms.showAddUser },
      };
    case "SET_NEW_USER_NAME":
      return {
        ...state,
        forms: {
          ...state.forms,
          newUser: { ...state.forms.newUser, name: action.value },
        },
      };
    case "SET_NEW_USER_ROLE":
      return {
        ...state,
        forms: {
          ...state.forms,
          newUser: { ...state.forms.newUser, role: action.value },
        },
      };
    case "SET_NEW_USER_LANG":
      return {
        ...state,
        forms: {
          ...state.forms,
          newUser: { ...state.forms.newUser, lang: action.value },
        },
      };
    case "SET_NEW_USER_PHONE":
      return {
        ...state,
        forms: {
          ...state.forms,
          newUser: { ...state.forms.newUser, phone: action.value },
        },
      };
    case "RESET_NEW_USER":
      return {
        ...state,
        forms: {
          ...state.forms,
          newUser: { name: "", role: "irrigator", lang: "en", phone: "" },
          showAddUser: false,
        },
      };
    case "SET_SAVING_USER":
      return {
        ...state,
        forms: { ...state.forms, savingUser: action.value },
      };
    case "SET_NEW_PIN":
      return { ...state, forms: { ...state.forms, newPin: action.pin } };
    case "CLEAR_NEW_PIN":
      return { ...state, forms: { ...state.forms, newPin: null } };
    case "SET_RESET_PIN":
      return { ...state, forms: { ...state.forms, resetPin: action.pin } };
    case "CLEAR_RESET_PIN":
      return { ...state, forms: { ...state.forms, resetPin: null } };
    case "SET_FILTER_DATE_FROM":
      return {
        ...state,
        filters: { ...state.filters, dateFrom: action.value },
      };
    case "SET_FILTER_DATE_TO":
      return {
        ...state,
        filters: { ...state.filters, dateTo: action.value },
      };
    case "SET_FILTER_HEADGATE":
      return {
        ...state,
        filters: { ...state.filters, headgate: action.value },
      };
    case "SET_FILTER_USER":
      return {
        ...state,
        filters: { ...state.filters, user: action.value },
      };
    case "SET_FILTER_VIA":
      return {
        ...state,
        filters: { ...state.filters, via: action.value },
      };
    case "CLEAR_FILTERS":
      return {
        ...state,
        filters: { dateFrom: "", dateTo: "", headgate: "", user: "", via: "" },
      };
    case "SET_CSV_LOADING":
      return { ...state, csvLoading: action.value };
    case "SET_TODAY":
      return { ...state, today: action.today, todayLabel: action.label };
    case "TOGGLE_REPORT_SETTINGS":
      return { ...state, showReportSettings: !state.showReportSettings };
    case "SET_SEASON_START":
      return { ...state, seasonStart: action.value };
    case "SET_RECIPIENT_NAME":
      return { ...state, recipientName: action.value };
  }
}

type Props = {
  initialUsers: AdminIrrigator[];
  initialHeadgates: AdminHeadgate[];
  initialEntries: AdminEntry[];
  brandId: string;
  canManage: boolean;
};

export default function WaterLogAdminPanel({
  initialUsers,
  initialHeadgates,
  initialEntries,
  brandId,
  canManage,
}: Props) {
  const router = useRouter();
  const [state, dispatch] = useReducer(reducer, {
    initialHeadgates,
    initialUsers,
    initialEntries,
  }, initState);

  // `today` and the human-readable date are read from the clock; compute
  // them in the browser only to avoid hydration mismatches. The setStates
  // are wrapped in an async IIFE so the effect body does not call setState
  // synchronously (avoids the cascading-renders ESLint rule).
  useEffect(() => {
    void (async () => {
      const now = new Date();
      dispatch({
        type: "SET_TODAY",
        today: now.toISOString().slice(0, 10),
        label: formatDate(now),
      });
    })();
  }, []);

  // ── Derived data ──────────────────────────────────────────────────
  const inSeason = useMemo(
    () => isInIrrigationSeason(new Date(), state.seasonStart),
    [state.seasonStart],
  );

  const todayEntries = useMemo(
    () =>
      state.today
        ? state.entries.filter(
            (e) => (e.logged_date ?? e.logged_at.slice(0, 10)) === state.today,
          )
        : [],
    [state.entries, state.today],
  );
  const todayTotal = todayEntries.reduce((s, e) => s + e.measurement, 0);

  const lastEntryByHeadgate = useMemo(() => {
    const map = new Map<string, AdminEntry>();
    for (const e of state.entries) {
      const existing = map.get(e.headgate_id);
      if (!existing || e.logged_at > existing.logged_at) {
        map.set(e.headgate_id, e);
      }
    }
    return map;
  }, [state.entries]);

  const filteredEntries = useMemo(() => {
    return state.entries.filter((e) => {
      if (state.filters.dateFrom && e.logged_at < state.filters.dateFrom) return false;
      if (state.filters.dateTo && e.logged_at > state.filters.dateTo + "T23:59:59.999Z") return false;
      if (state.filters.headgate && e.headgate_id !== state.filters.headgate) return false;
      if (state.filters.user && e.user_id !== state.filters.user) return false;
      if (state.filters.via && e.submitted_via !== state.filters.via) return false;
      return true;
    });
  }, [
    state.entries,
    state.filters.dateFrom,
    state.filters.dateTo,
    state.filters.headgate,
    state.filters.user,
    state.filters.via,
  ]);

  // ── Toast helper ──────────────────────────────────────────────────
  function notify(msg: string, kind: "ok" | "err" = "ok") {
    dispatch({ type: "SET_TOAST", toast: { msg, kind } });
    setTimeout(() => dispatch({ type: "CLEAR_TOAST" }), 2800);
  }

  // ── Handlers are defined in their respective section components ─────

  function persistSeason(s: IrrigationSeasonSettings) {
    dispatch({ type: "SET_SEASON_START", value: s });
    try {
      localStorage.setItem("wl_season_settings:v1", JSON.stringify(s));
    } catch {}
  }

  function persistRecipientName(v: string) {
    dispatch({ type: "SET_RECIPIENT_NAME", value: v });
    try {
      localStorage.setItem("wl_recipient_name", v);
    } catch {}
  }

  // ── Render ────────────────────────────────────────────────────────
  return (
    <div className="relative">
      <HeaderNav />

      <TodaySummarySection
        brandId={brandId}
        today={state.today}
        todayLabel={state.todayLabel}
        todayEntries={todayEntries}
        todayTotal={todayTotal}
        headgates={state.headgates}
        users={state.users}
        inSeason={inSeason}
        showReportSettings={state.showReportSettings}
        seasonStart={state.seasonStart}
        recipientName={state.recipientName}
        notify={notify}
        onToggleReportSettings={() => dispatch({ type: "TOGGLE_REPORT_SETTINGS" })}
        onSeasonChange={persistSeason}
        onRecipientNameChange={persistRecipientName}
      />

      <HeadgatesSection
        brandId={brandId}
        headgates={state.headgates}
        lastEntryByHeadgate={lastEntryByHeadgate}
        canManage={canManage}
        showAddHg={state.forms.showAddHg}
        newHg={state.forms.newHg}
        savingHg={state.forms.savingHg}
        notify={notify}
        dispatch={dispatch}
        onEdit={(h) => router.push(`/admin/water-log/headgates/${h.id}`)}
      />

      <WaterUsersSection
        brandId={brandId}
        users={state.users}
        canManage={canManage}
        showAddUser={state.forms.showAddUser}
        newUser={state.forms.newUser}
        savingUser={state.forms.savingUser}
        newPin={state.forms.newPin}
        resetPin={state.forms.resetPin}
        notify={notify}
        dispatch={dispatch}
      />

      <EntriesSection
        brandId={brandId}
        entries={state.entries}
        filteredEntries={filteredEntries}
        headgates={state.headgates}
        users={state.users}
        filters={state.filters}
        csvLoading={state.csvLoading}
        today={state.today}
        notify={notify}
        dispatch={dispatch}
        onEditEntry={(e) => router.push(`/admin/water-log/entries/${e.id}`)}
      />

      <ToastNotification toast={state.toast} />
    </div>
  );
}

// ── Sub-components ──────────────────────────────────────────────────────────

function HeaderNav() {
  return (
    <div className="mb-6 flex flex-wrap items-center gap-2">
      <Link href="/admin/water-log/headgates">
        <AdminButton variant="secondary" size="sm" icon={<QrIcon />}>
          QR Codes
        </AdminButton>
      </Link>
      <Link href="/admin/water-log/settings">
        <AdminButton variant="secondary" size="sm" icon={<GearIcon />}>
          Settings
        </AdminButton>
      </Link>
      <Link href="/water/admin" target="_blank" rel="noopener noreferrer">
        <AdminButton variant="secondary" size="sm" icon={<FieldIcon />}>
          Field Admin ↗
        </AdminButton>
      </Link>
    </div>
  );
}

type TodaySummarySectionProps = {
  brandId: string;
  today: string;
  todayLabel: string;
  todayEntries: AdminEntry[];
  todayTotal: number;
  headgates: AdminHeadgate[];
  users: AdminIrrigator[];
  inSeason: boolean;
  showReportSettings: boolean;
  seasonStart: IrrigationSeasonSettings;
  recipientName: string;
  notify: (msg: string, kind?: "ok" | "err") => void;
  onToggleReportSettings: () => void;
  onSeasonChange: (s: IrrigationSeasonSettings) => void;
  onRecipientNameChange: (v: string) => void;
};

function TodaySummarySection({
  brandId,
  today,
  todayLabel,
  todayEntries,
  todayTotal,
  headgates,
  users,
  inSeason,
  showReportSettings,
  seasonStart,
  recipientName,
  notify,
  onToggleReportSettings,
  onSeasonChange,
  onRecipientNameChange,
}: TodaySummarySectionProps) {
  async function handlePreviewReport() {
    const all = await getWaterEntries(brandId, 1000);
    const todayRows: WaterLogReportRow[] = [];
    for (const e of all) {
      if ((e.logged_date ?? e.logged_at.slice(0, 10)) === today) {
        todayRows.push(shapeWaterLogEntry(e));
      }
    }
    const report = formatDailyWaterReport(todayRows, {
      recipientName: recipientName || undefined,
      previewMode: true,
    });
    if (!report) {
      notify(`No entries today — report would be skipped (season: ${inSeason ? "in" : "out"}).`);
      return;
    }
    // The browser's `alert` blocks; the modal preview is the better UX in
    // a future iteration, but alert is dependency-free today.
    window.alert(`Daily Report — ${inSeason ? "in season" : "out of season"}\n\n${report}`);
  }
  return (
    <section className="relative overflow-hidden rounded-2xl border border-[#d4d9d3] bg-[#fdfaf2] shadow-[0_1px_0_rgba(0,0,0,0.04)]">
      {/* Subtle topographic pattern overlay */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-[0.18]"
        style={{
          backgroundImage:
            "repeating-linear-gradient(45deg, transparent 0 14px, rgba(26,77,46,0.06) 14px 15px), repeating-linear-gradient(-45deg, transparent 0 14px, rgba(202,138,4,0.04) 14px 15px)",
        }}
      />

      <div className="relative grid grid-cols-1 gap-6 p-6 md:grid-cols-[200px_1fr] md:gap-8">
        {/* Hero gauge */}
        <div className="flex flex-col items-center justify-center gap-2">
          <div className="text-[10px] font-mono uppercase tracking-[0.3em] text-[#1a4d2e]/70">
            Tuxedo Ditch Co.
          </div>
          <WaterGauge
            size={120}
            level={
              todayEntries.length === 0
                ? null
                : Math.min(1, todayTotal / Math.max(todayTotal, 100))
            }
            status="open"
            ariaLabel="Today's water level"
          />
          <div className="text-[10px] font-mono uppercase tracking-[0.3em] text-[#1a4d2e]/70">
            Vol. {todayTotal.toFixed(2)} {headgates[0]?.unit ?? "CFS"}
          </div>
        </div>

        <div className="flex flex-col gap-4">
          <div>
            <h2
              className="text-2xl font-semibold tracking-tight text-[#1a4d2e]"
              style={{ fontFamily: "var(--font-display, Georgia, serif)" }}
            >
              Today&apos;s Summary
            </h2>
            <p className="mt-1 flex items-center gap-2 text-sm text-[#57694e]">
              <SeasonMark inSeason={inSeason} size={14} />
              {inSeason ? (
                <span className="font-medium text-[#1a4d2e]">In irrigation season</span>
              ) : (
                <span className="font-medium text-[#a16207]">Outside irrigation season</span>
              )}
              <span className="text-[#57694e]/60">·</span>
              <span className="font-mono text-[#1d1d1f]">
                {todayEntries.length} {todayEntries.length === 1 ? "entry" : "entries"}
              </span>
              <span className="text-[#57694e]/60">·</span>
              <span className="text-[#57694e]">
                {todayLabel}
              </span>
            </p>
          </div>

          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
            <StatTile
              label="Total volume"
              value={todayTotal.toFixed(2)}
              unit={headgates[0]?.unit ?? "CFS"}
              accent
            />
            <StatTile
              label="Headgates"
              value={headgates.filter((h) => h.active).length.toString()}
              unit={`of ${headgates.length}`}
            />
            <StatTile
              label="Active irrigators"
              value={users.filter((u) => u.active).length.toString()}
              unit={`of ${users.length}`}
            />
            <StatTile
              label="Last entry"
              value={
                todayEntries.length
                  ? formatDateTime(todayEntries[0].logged_at).split(",").pop()?.trim() ?? "—"
                  : "—"
              }
              unit=""
              mono
            />
          </div>

          <div className="flex flex-wrap gap-2">
            <AdminButton
              variant="secondary"
              size="sm"
              icon={<ReportIcon />}
              onClick={handlePreviewReport}
            >
              Preview Report
            </AdminButton>
            <AdminButton
              variant={showReportSettings ? "primary" : "secondary"}
              size="sm"
              icon={<GearIcon />}
              onClick={onToggleReportSettings}
            >
              Report Settings
            </AdminButton>
          </div>

          {showReportSettings && (
            <ReportSettingsPanel
              season={seasonStart}
              onSeasonChange={onSeasonChange}
              recipientName={recipientName}
              onRecipientNameChange={onRecipientNameChange}
            />
          )}
        </div>
      </div>
    </section>
  );
}

type HeadgatesSectionProps = {
  brandId: string;
  headgates: AdminHeadgate[];
  lastEntryByHeadgate: Map<string, AdminEntry>;
  canManage: boolean;
  showAddHg: boolean;
  newHg: HgForm;
  savingHg: boolean;
  notify: (msg: string, kind?: "ok" | "err") => void;
  dispatch: React.Dispatch<Action>;
  onEdit: (h: AdminHeadgate) => void;
};

function HeadgatesSection({
  brandId,
  headgates,
  lastEntryByHeadgate,
  canManage,
  showAddHg,
  newHg,
  savingHg,
  notify,
  dispatch,
  onEdit,
}: HeadgatesSectionProps) {
  async function handleAdd(e: React.FormEvent) {
    e.preventDefault();
    const trimmedName = newHg.name.trim();
    if (!trimmedName) return;
    dispatch({ type: "SET_SAVING_HG", value: true });
    const res = await createWaterHeadgate(brandId, trimmedName, newHg.unit, {
      notes: newHg.notes.trim() || null,
    });
    if (res.success && res.headgate) {
      dispatch({ type: "ADD_HEADGATE", headgate: res.headgate });
      dispatch({ type: "RESET_NEW_HG" });
      notify("Headgate added");
    } else {
      notify(res.error ?? "Failed", "err");
    }
    dispatch({ type: "SET_SAVING_HG", value: false });
  }

  async function handleDelete(h: AdminHeadgate) {
    if (!window.confirm(`Delete "${h.name}"? Existing log entries will be preserved.`)) return;
    const res = await deleteWaterHeadgate(h.id);
    if (res.success) {
      dispatch({ type: "REMOVE_HEADGATE", id: h.id });
      notify("Headgate removed");
    } else {
      notify(res.error ?? "Failed", "err");
    }
  }

  async function handleRegenerateToken(h: AdminHeadgate) {
    if (
      !window.confirm(
        `Regenerate QR token for "${h.name}"? Existing printed QR codes will stop working.`,
      )
    ) return;
    const res = await regenerateHeadgateToken(h.id);
    if (res.success && res.token) {
      dispatch({ type: "UPDATE_HEADGATE_TOKEN", id: h.id, token: res.token });
      notify("Token regenerated");
    } else {
      notify(res.error ?? "Failed", "err");
    }
  }
  return (
    <>
      <SectionHeader
        index="§ 01"
        title="Headgates"
        subtitle="Physical gates in the ditch network. Each gets a printable QR code so field workers can scan to log a reading without typing the gate name."
        action={
          canManage ? (
            <AdminButton size="sm" onClick={() => dispatch({ type: "TOGGLE_ADD_HG" })}>
              {showAddHg ? "Cancel" : "+ Add Headgate"}
            </AdminButton>
          ) : null
        }
      />

      {showAddHg && canManage && (
        <form
          onSubmit={handleAdd}
          className="mb-4 grid grid-cols-1 gap-3 rounded-xl border border-[#d4d9d3] bg-white p-4 sm:grid-cols-[1fr_120px_1fr_auto]"
        >
          <Input
            label="Name"
            value={newHg.name}
            onChange={(v) => dispatch({ type: "SET_NEW_HG_NAME", value: v })}
            placeholder="e.g. North Field Gate 1"
            required
          />
          <Select
            label="Unit"
            value={newHg.unit}
            onChange={(v) => dispatch({ type: "SET_NEW_HG_UNIT", value: v })}
            options={["CFS", "GPM", "Inches", "AF/Day", "gal", "ac-ft"]}
          />
          <Input
            label="Notes"
            value={newHg.notes}
            onChange={(v) => dispatch({ type: "SET_NEW_HG_NOTES", value: v })}
            placeholder="Location, GPS, contact…"
          />
          <div className="flex items-end">
            <AdminButton type="submit" disabled={savingHg} isLoading={savingHg} fullWidth>
              Add
            </AdminButton>
          </div>
        </form>
      )}

      {headgates.length === 0 ? (
        <EmptyState
          icon={<WaterGauge size={36} level={null} status="open" />}
          title="No headgates yet"
          body="Add a headgate to start logging. Each one gets a unique QR code you can print and post at the gate."
        />
      ) : (
        <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {headgates.map((h) => {
            const last = lastEntryByHeadgate.get(h.id);
            const level =
              last && h.high_threshold
                ? Math.min(1, last.measurement / Number(h.high_threshold))
                : null;
            return (
              <li
                key={h.id}
                className="group rounded-xl border border-[#d4d9d3] bg-white p-4 transition hover:border-[#1a4d2e]/40 hover:shadow-[0_4px_16px_rgba(26,77,46,0.08)]"
              >
                <div className="flex items-start gap-3">
                  <WaterGauge
                    size={36}
                    level={level}
                    status={h.status as "open" | "closed" | "maintenance"}
                    className="mt-0.5"
                  />
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <h3 className="truncate font-semibold text-[#1d1d1f]">
                        {h.name}
                      </h3>
                      <StatusPill
                        kind={
                          !h.active
                            ? "inactive"
                            : h.status === "closed"
                              ? "closed"
                              : h.status === "maintenance"
                                ? "warn"
                                : "active"
                        }
                      />
                    </div>
                    <p className="mt-0.5 font-mono text-[11px] uppercase tracking-wider text-[#86868b]">
                      Unit: {h.unit} · Token: {h.headgate_token.slice(0, 8)}…
                    </p>
                    {last ? (
                      <p className="mt-2 text-sm text-[#57694e]">
                        Last:{" "}
                        <span className="font-mono font-semibold text-[#1d1d1f]">
                          {last.measurement} {h.unit}
                        </span>{" "}
                        <span className="text-[#86868b]">
                          by {last.user_name} · {formatDateTime(last.logged_at)}
                        </span>
                      </p>
                    ) : (
                      <p className="mt-2 text-sm italic text-[#86868b]">
                        No readings yet
                      </p>
                    )}
                    {(h.high_threshold != null || h.low_threshold != null) && (
                      <p className="mt-1 font-mono text-[11px] text-[#57694e]">
                        {h.high_threshold != null && (
                          <>Hi&nbsp;≥&nbsp;{h.high_threshold}&nbsp;&nbsp;</>
                        )}
                        {h.low_threshold != null && (
                          <>Lo&nbsp;≤&nbsp;{h.low_threshold}</>
                        )}
                      </p>
                    )}
                  </div>
                </div>

                {canManage && (
                  <div className="mt-3 flex flex-wrap items-center justify-between gap-1 border-t border-[#e8ebe8] pt-3 text-[11px]">
                    <button type="button"
                      onClick={() => onEdit(h)}
                      className="font-medium text-[#1a4d2e] hover:underline"
                     aria-label="Edit →">
                      Edit →
                    </button>
                    <div className="flex items-center gap-2">
                      <button type="button"
                        onClick={() => handleRegenerateToken(h)}
                        className="text-[#57694e] hover:text-[#1a4d2e]"
                       aria-label="Rotate token">
                        Rotate token
                      </button>
                      <span className="text-[#d4d9d3]">·</span>
                      <button type="button"
                        onClick={() => handleDelete(h)}
                        className="text-[#b91c1c] hover:text-[#7f1d1d]"
                       aria-label="Delete">
                        Delete
                      </button>
                    </div>
                  </div>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </>
  );
}

type WaterUsersSectionProps = {
  brandId: string;
  users: AdminIrrigator[];
  canManage: boolean;
  showAddUser: boolean;
  newUser: UserForm;
  savingUser: boolean;
  newPin: PinInfo | null;
  resetPin: PinInfo | null;
  notify: (msg: string, kind?: "ok" | "err") => void;
  dispatch: React.Dispatch<Action>;
};

function WaterUsersSection({
  brandId,
  users,
  canManage,
  showAddUser,
  newUser,
  savingUser,
  newPin,
  resetPin,
  notify,
  dispatch,
}: WaterUsersSectionProps) {
  async function handleAdd(e: React.FormEvent) {
    e.preventDefault();
    const trimmedName = newUser.name.trim();
    if (!trimmedName) return;
    dispatch({ type: "SET_SAVING_USER", value: true });
    const res = await createWaterUser(
      brandId,
      trimmedName,
      newUser.role,
      newUser.lang,
      newUser.phone.trim() || null,
    );
    if (res.success && res.user && res.pin) {
      dispatch({ type: "ADD_USER", user: res.user });
      dispatch({ type: "SET_NEW_PIN", pin: { name: res.user.name, pin: res.pin } });
      dispatch({ type: "RESET_NEW_USER" });
      notify("User created");
    } else {
      notify(res.error ?? "Failed", "err");
    }
    dispatch({ type: "SET_SAVING_USER", value: false });
  }

  async function handleResetPin(u: AdminIrrigator) {
    if (!window.confirm(`Reset PIN for "${u.name}"? Their current PIN will stop working.`))
      return;
    const res = await resetWaterIrrigatorPin(u.id);
    if (res.success && res.pin) {
      dispatch({ type: "SET_RESET_PIN", pin: { name: u.name, pin: res.pin } });
      notify("PIN reset");
    } else {
      notify(res.error ?? "Failed", "err");
    }
  }

  async function handleDelete(u: AdminIrrigator) {
    if (!window.confirm(`Deactivate "${u.name}"? Their existing log entries will be preserved.`))
      return;
    const res = await deleteWaterUser(u.id);
    if (res.success) {
      dispatch({ type: "DEACTIVATE_USER", id: u.id });
      notify("User deactivated");
    } else {
      notify(res.error ?? "Failed", "err");
    }
  }
  return (
    <>
      <SectionHeader
        index="§ 02"
        title="Water Users"
        subtitle="The people who log readings in the field. Each gets a 4-digit PIN. Admin role can manage headgates, users, and entries; Irrigators can only submit."
        action={
          canManage ? (
            <AdminButton size="sm" onClick={() => dispatch({ type: "TOGGLE_ADD_USER" })}>
              {showAddUser ? "Cancel" : "+ Add User"}
            </AdminButton>
          ) : null
        }
      />

      {newPin && (
        <PinBanner
          title={`New PIN for ${newPin.name}`}
          pin={newPin.pin}
          onDismiss={() => dispatch({ type: "CLEAR_NEW_PIN" })}
        />
      )}
      {resetPin && (
        <PinBanner
          title={`Reset PIN for ${resetPin.name}`}
          pin={resetPin.pin}
          tone="warn"
          onDismiss={() => dispatch({ type: "CLEAR_RESET_PIN" })}
        />
      )}

      {showAddUser && canManage && (
        <form
          onSubmit={handleAdd}
          className="mb-4 grid grid-cols-1 gap-3 rounded-xl border border-[#d4d9d3] bg-white p-4 sm:grid-cols-[1fr_140px_120px_1fr_auto]"
        >
          <Input
            label="Name"
            value={newUser.name}
            onChange={(v) => dispatch({ type: "SET_NEW_USER_NAME", value: v })}
            placeholder="Full name"
            required
          />
          <Select
            label="Role"
            value={newUser.role}
            onChange={(v) => dispatch({ type: "SET_NEW_USER_ROLE", value: v as "irrigator" | "water_admin" })}
            options={[
              { value: "irrigator", label: "Irrigator" },
              { value: "water_admin", label: "Admin" },
            ]}
          />
          <Select
            label="Language"
            value={newUser.lang}
            onChange={(v) => dispatch({ type: "SET_NEW_USER_LANG", value: v })}
            options={[
              { value: "en", label: "English" },
              { value: "es", label: "Español" },
            ]}
          />
          <Input
            label="Phone"
            value={newUser.phone}
            onChange={(v) => dispatch({ type: "SET_NEW_USER_PHONE", value: v })}
            placeholder="+1…"
            type="tel"
          />
          <div className="flex items-end">
            <AdminButton type="submit" disabled={savingUser} isLoading={savingUser} fullWidth>
              Add
            </AdminButton>
          </div>
        </form>
      )}

      <RoleLegend />

      {users.length === 0 ? (
        <EmptyState
          icon={<UserIcon />}
          title="No water users yet"
          body="Add an irrigator or admin to grant field access. Their PIN is generated automatically — write it down before dismissing."
        />
      ) : (
        <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
          {users.map((u) => (
            <li
              key={u.id}
              className={`flex items-center gap-3 rounded-xl border bg-white px-3 py-2 ${
                u.active ? "border-[#d4d9d3]" : "border-[#d4d9d3] bg-[#f5f3ef] opacity-70"
              }`}
            >
              <Avatar name={u.name} role={u.role} />
              <div className="min-w-0 flex-1">
                <p className="truncate font-semibold text-[#1d1d1f]">{u.name}</p>
                <p className="font-mono text-[11px] text-[#86868b]">
                  {u.role === "water_admin" ? "ADMIN" : "IRRIGATOR"} · {u.language_preference === "es" ? "ES" : "EN"}
                  {u.last_used_at ? ` · seen ${formatDate(u.last_used_at)}` : " · never signed in"}
                </p>
              </div>
              {canManage && (
                <div className="flex shrink-0 items-center gap-1 text-[11px]">
                  <button type="button"
                    onClick={() => handleResetPin(u)}
                    className="text-[#57694e] hover:text-[#1a4d2e]"
                   aria-label="PIN">
                    PIN
                  </button>
                  <span className="text-[#d4d9d3]">·</span>
                  <button type="button"
                    onClick={() => handleDelete(u)}
                    className="text-[#b91c1c] hover:text-[#7f1d1d]"
                   aria-label="Off">
                    Off
                  </button>
                </div>
              )}
            </li>
          ))}
        </ul>
      )}
    </>
  );
}

type EntriesSectionProps = {
  brandId: string;
  entries: AdminEntry[];
  filteredEntries: AdminEntry[];
  headgates: AdminHeadgate[];
  users: AdminIrrigator[];
  filters: {
    dateFrom: string;
    dateTo: string;
    headgate: string;
    user: string;
    via: string;
  };
  csvLoading: boolean;
  today: string;
  notify: (msg: string, kind?: "ok" | "err") => void;
  dispatch: React.Dispatch<Action>;
  onEditEntry: (e: AdminEntry) => void;
};

function EntriesSection({
  brandId,
  entries,
  filteredEntries,
  headgates,
  users,
  filters,
  csvLoading,
  today,
  notify,
  dispatch,
  onEditEntry,
}: EntriesSectionProps) {
  async function handleExportCSV() {
    dispatch({ type: "SET_CSV_LOADING", value: true });
    try {
      const all = await getWaterEntries(brandId, 5000);
      const shaped: WaterLogReportRow[] = all.map(shapeWaterLogEntry);
      const exportFilters: WaterLogFilter = {
        dateFrom: filters.dateFrom || undefined,
        dateTo: filters.dateTo || undefined,
        headgateId: filters.headgate || undefined,
        userId: filters.user || undefined,
        submittedVia: filters.via || undefined,
      };
      const filtered = filterWaterLogEntries(shaped, exportFilters);
      downloadWaterLogCSV(`water-log-${today}.csv`, filtered);
      notify(`Exported ${filtered.length} entries`);
    } finally {
      dispatch({ type: "SET_CSV_LOADING", value: false });
    }
  }
  return (
    <>
      <SectionHeader
        index="§ 03"
        title="Recent Entries"
        subtitle="The last {n} readings logged from the field or the admin panel. Use the filters to narrow, then export to CSV."
        action={
          <AdminButton
            size="sm"
            onClick={handleExportCSV}
            isLoading={csvLoading}
            icon={<DownloadIcon />}
          >
            Export CSV
          </AdminButton>
        }
      />

      <div className="mb-3 flex flex-wrap items-center gap-2 rounded-xl border border-[#d4d9d3] bg-white p-2.5">
        <FilterChip label="From">
          <input
            type="date"
            value={filters.dateFrom}
            onChange={(e) => dispatch({ type: "SET_FILTER_DATE_FROM", value: e.target.value })}
            className="border-0 bg-transparent text-sm text-[#1d1d1f] outline-none"
            aria-label="Filter: from date"
          />
        </FilterChip>
        <FilterChip label="To">
          <input
            type="date"
            value={filters.dateTo}
            onChange={(e) => dispatch({ type: "SET_FILTER_DATE_TO", value: e.target.value })}
            className="border-0 bg-transparent text-sm text-[#1d1d1f] outline-none"
            aria-label="Filter: to date"
          />
        </FilterChip>
        <FilterChip label="Headgate">
          <select
            value={filters.headgate}
            onChange={(e) => dispatch({ type: "SET_FILTER_HEADGATE", value: e.target.value })}
            className="border-0 bg-transparent text-sm text-[#1d1d1f] outline-none"
            aria-label="Filter: headgate"
          >
            <option value="">All</option>
            {headgates.map((h) => (
              <option key={h.id} value={h.id}>
                {h.name}
              </option>
            ))}
          </select>
        </FilterChip>
        <FilterChip label="User">
          <select
            value={filters.user}
            onChange={(e) => dispatch({ type: "SET_FILTER_USER", value: e.target.value })}
            className="border-0 bg-transparent text-sm text-[#1d1d1f] outline-none"
            aria-label="Filter: user"
          >
            <option value="">All</option>
            {users.map((u) => (
              <option key={u.id} value={u.id}>
                {u.name}
              </option>
            ))}
          </select>
        </FilterChip>
        <FilterChip label="Via">
          <select
            value={filters.via}
            onChange={(e) => dispatch({ type: "SET_FILTER_VIA", value: e.target.value })}
            className="border-0 bg-transparent text-sm text-[#1d1d1f] outline-none"
            aria-label="Filter: submission source"
          >
            <option value="">All</option>
            <option value="field">Field</option>
            <option value="admin">Admin</option>
            <option value="app">App</option>
          </select>
        </FilterChip>
        {(filters.dateFrom ||
          filters.dateTo ||
          filters.headgate ||
          filters.user ||
          filters.via) && (
          <button type="button"
            onClick={() => dispatch({ type: "CLEAR_FILTERS" })}
            className="text-xs font-medium text-[#57694e] hover:text-[#1a4d2e] hover:underline"
           aria-label="Clear filters">
            Clear filters
          </button>
        )}
        <span className="ml-auto font-mono text-[11px] text-[#86868b]">
          {filteredEntries.length} of {entries.length} entries
        </span>
      </div>

      {filteredEntries.length === 0 ? (
        <EmptyState
          icon={<TableIcon />}
          title="No entries match"
          body={entries.length === 0 ? "No readings have been logged yet." : "Try clearing the filters above."}
        />
      ) : (
        <div className="overflow-hidden rounded-xl border border-[#d4d9d3] bg-white">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-[#d4d9d3] bg-[#f5f3ef] text-left font-mono text-[10px] uppercase tracking-[0.15em] text-[#57694e]">
                <th className="px-4 py-2.5">When</th>
                <th className="px-4 py-2.5">User</th>
                <th className="px-4 py-2.5">Headgate</th>
                <th className="px-4 py-2.5 text-right">Measurement</th>
                <th className="px-4 py-2.5 text-right">Gallons</th>
                <th className="px-4 py-2.5">Method</th>
                <th className="px-4 py-2.5">Via</th>
                <th className="px-4 py-2.5" aria-label="Actions"></th>
              </tr>
            </thead>
            <tbody>
              {filteredEntries.map((e, i) => (
                <tr
                  key={e.id}
                  className={`group border-b border-[#e8ebe8] last:border-0 transition-colors hover:bg-[#fdfaf2] ${
                    i % 2 === 0 ? "" : "bg-[#fafaf7]"
                  }`}
                >
                  <td className="whitespace-nowrap px-4 py-2.5 font-mono text-xs text-[#57694e]">
                    {formatDateTime(e.logged_at)}
                  </td>
                  <td className="whitespace-nowrap px-4 py-2.5 text-[#1d1d1f]">
                    {e.user_name}
                  </td>
                  <td className="whitespace-nowrap px-4 py-2.5 text-[#1d1d1f]">
                    {e.headgate_name}
                  </td>
                  <td className="whitespace-nowrap px-4 py-2.5 text-right font-mono font-semibold text-[#1d1d1f]">
                    {e.measurement}{" "}
                    <span className="text-[10px] text-[#86868b]">{e.unit}</span>
                  </td>
                  <td className="whitespace-nowrap px-4 py-2.5 text-right font-mono text-[#57694e]">
                    {e.total_gallons != null ? e.total_gallons.toFixed(1) : "—"}
                  </td>
                  <td className="whitespace-nowrap px-4 py-2.5 font-mono text-[11px] uppercase text-[#57694e]">
                    {e.method}
                  </td>
                  <td className="whitespace-nowrap px-4 py-2.5">
                    <span
                      className={`inline-block rounded px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wider ${
                        e.submitted_via === "field"
                          ? "bg-[#dcfce7] text-[#15803d]"
                          : "bg-[#e8ebe8] text-[#57694e]"
                      }`}
                    >
                      {e.submitted_via}
                    </span>
                  </td>
                  <td className="px-4 py-2.5 text-right text-[11px]">
                    <button type="button"
                      onClick={() => onEditEntry(e)}
                      className="font-medium text-[#1a4d2e] opacity-0 transition-opacity group-hover:opacity-100 hover:underline"
                     aria-label="Edit →">
                      Edit →
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </>
  );
}

function ToastNotification({ toast }: { toast: Toast | null }) {
  if (!toast) return null;
  return (
    <div
      aria-live="polite"
      className={`fixed bottom-6 right-6 z-50 rounded-xl px-4 py-3 font-medium shadow-lg transition-all ${
        toast.kind === "ok"
          ? "border border-[#15803d] bg-[#dcfce7] text-[#15803d]"
          : "border border-[#b91c1c] bg-[#fee2e2] text-[#b91c1c]"
      }`}
    >
      {toast.msg}
    </div>
  );
}

// ─── Helper sub-components (unchanged) ──────────────────────────────────────

function SectionHeader({
  index,
  title,
  subtitle,
  action,
}: {
  index: string;
  title: string;
  subtitle: string;
  action?: React.ReactNode;
}) {
  return (
    <header className="mb-3 mt-10 flex items-start justify-between gap-4 border-b border-[#d4d9d3] pb-3">
      <div>
        <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-[#1a4d2e]">
          {index}
        </div>
        <h2
          className="mt-0.5 text-xl font-semibold text-[#1d1d1f]"
          style={{ fontFamily: "var(--font-display, Georgia, serif)" }}
        >
          {title}
        </h2>
        <p className="mt-0.5 max-w-xl text-xs text-[#57694e]">{subtitle}</p>
      </div>
      {action}
    </header>
  );
}

function StatTile({
  label,
  value,
  unit,
  accent,
  mono,
}: {
  label: string;
  value: string;
  unit: string;
  accent?: boolean;
  mono?: boolean;
}) {
  return (
    <div
      className={`rounded-lg border p-3 ${
        accent
          ? "border-[#1a4d2e]/30 bg-[#f0fdf4]"
          : "border-[#d4d9d3] bg-white"
      }`}
    >
      <div className="text-[10px] font-mono uppercase tracking-wider text-[#57694e]">
        {label}
      </div>
      <div className="mt-0.5 flex items-baseline gap-1">
        <span
          className={`text-lg font-semibold text-[#1a4d2e] ${
            mono ? "font-mono" : ""
          }`}
        >
          {value}
        </span>
        {unit && (
          <span className="font-mono text-[10px] uppercase text-[#57694e]">
            {unit}
          </span>
        )}
      </div>
    </div>
  );
}

const statusPillMap = {
  active: { bg: "bg-[#dcfce7]", fg: "text-[#15803d]", label: "Active" },
  inactive: { bg: "bg-[#e8ebe8]", fg: "text-[#57694e]", label: "Inactive" },
  closed: { bg: "bg-[#e8ebe8]", fg: "text-[#57694e]", label: "Closed" },
  warn: { bg: "bg-[#fef9c3]", fg: "text-[#a16207]", label: "Maint." },
} as const;

function StatusPill({ kind }: { kind: "active" | "inactive" | "closed" | "warn" }) {
  const s = statusPillMap[kind];
  return (
    <span
      className={`inline-flex shrink-0 items-center rounded-full px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider ${s.bg} ${s.fg}`}
    >
      {s.label}
    </span>
  );
}

function PinBanner({
  title,
  pin,
  tone = "ok",
  onDismiss,
}: {
  title: string;
  pin: string;
  tone?: "ok" | "warn";
  onDismiss: () => void;
}) {
  return (
    <div
      className={`mb-4 flex items-center gap-4 rounded-xl border p-4 ${
        tone === "warn"
          ? "border-[#fde047] bg-[#fef9c3]"
          : "border-[#15803d]/40 bg-[#dcfce7]"
      }`}
    >
      <KeyIcon />
      <div className="flex-1">
        <p className="font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
          {title}
        </p>
        <p
          className="font-mono text-2xl font-bold tracking-[0.5em] text-[#1a4d2e]"
          aria-label={`PIN ${pin.split("").join(" ")}`}
        >
          {pin}
        </p>
      </div>
      <button type="button"
        onClick={onDismiss}
        className="rounded-lg border border-[#1a4d2e]/30 px-3 py-1.5 text-xs font-semibold text-[#1a4d2e] hover:bg-white"
       aria-label="Dismiss">
        Dismiss
      </button>
    </div>
  );
}

function RoleLegend() {
  return (
    <p className="mb-3 flex items-center gap-3 font-mono text-[11px] text-[#57694e]">
      <span>
        <span className="font-bold text-[#1e3a8a]">ADMIN</span>
        <span className="text-[#86868b]"> — manage headgates, users, entries</span>
      </span>
      <span className="text-[#d4d9d3]">·</span>
      <span>
        <span className="font-bold text-[#15803d]">IRRIGATOR</span>
        <span className="text-[#86868b]"> — submit entries only</span>
      </span>
    </p>
  );
}

function EmptyState({
  icon,
  title,
  body,
}: {
  icon: React.ReactNode;
  title: string;
  body: string;
}) {
  return (
    <div className="rounded-xl border border-dashed border-[#d4d9d3] bg-white px-6 py-10 text-center">
      <div className="mx-auto mb-3 flex w-12 items-center justify-center text-[#86868b]">
        {icon}
      </div>
      <p
        className="text-base font-semibold text-[#1d1d1f]"
        style={{ fontFamily: "var(--font-display, Georgia, serif)" }}
      >
        {title}
      </p>
      <p className="mx-auto mt-1 max-w-md text-sm text-[#57694e]">{body}</p>
    </div>
  );
}

function Input({
  label,
  value,
  onChange,
  placeholder,
  required,
  type = "text",
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  placeholder?: string;
  required?: boolean;
  type?: string;
}) {
  return (
    <label className="block">
      <span className="mb-1 block font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
        {label}
      </span>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        required={required}
        className="w-full rounded-lg border border-[#d4d9d3] bg-white px-3 py-2 text-sm text-[#1d1d1f] outline-none transition focus:border-[#1a4d2e] focus:ring-2 focus:ring-[#1a4d2e]/15"
      />
    </label>
  );
}

function Select({
  label,
  value,
  onChange,
  options,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  options: (string | { value: string; label: string })[];
}) {
  return (
    <label className="block">
      <span className="mb-1 block font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
        {label}
      </span>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full rounded-lg border border-[#d4d9d3] bg-white px-3 py-2 text-sm text-[#1d1d1f] outline-none transition focus:border-[#1a4d2e] focus:ring-2 focus:ring-[#1a4d2e]/15"
      >
        {options.map((o) => {
          if (typeof o === "string") {
            return (
              <option key={o} value={o}>
                {o}
              </option>
            );
          }
          return (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          );
        })}
      </select>
    </label>
  );
}

function FilterChip({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex items-center gap-1.5 rounded-lg border border-[#d4d9d3] bg-[#fafaf7] px-2 py-1">
      <span className="font-mono text-[10px] uppercase tracking-wider text-[#86868b]">
        {label}
      </span>
      {children}
    </div>
  );
}

function Avatar({ name, role }: { name: string; role: string }) {
  const initials = name
    .split(/\s+/)
    .flatMap((n) => (n[0] ? [n[0]] : []))
    .slice(0, 2)
    .join("")
    .toUpperCase();
  const bg = role === "water_admin" ? "#1a4d2e" : "#57694e";
  return (
    <span
      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full font-mono text-[11px] font-bold text-white"
      style={{ background: bg }}
      aria-hidden
    >
      {initials || "·"}
    </span>
  );
}

function ReportSettingsPanel({
  season,
  onSeasonChange,
  recipientName,
  onRecipientNameChange,
}: {
  season: IrrigationSeasonSettings;
  onSeasonChange: (s: IrrigationSeasonSettings) => void;
  recipientName: string;
  onRecipientNameChange: (v: string) => void;
}) {
  return (
    <div className="rounded-xl border border-[#d4d9d3] bg-white p-4">
      <div className="mb-3 flex items-center justify-between">
        <p className="font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
          Report / Messaging Settings
        </p>
      </div>
      <p className="mb-3 rounded-lg bg-[#fef9c3] px-3 py-2 text-xs text-[#a16207]">
        <strong>Preview only.</strong> Daily-report delivery is wired through
        the scheduled <code>api/cron/water-report</code> endpoint and respects
        these settings.
      </p>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <div>
          <span className="mb-1 block font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
            Season start
          </span>
          <div className="flex gap-1">
            <MonthSelect
              value={season.seasonStartMonth}
              onChange={(m) => onSeasonChange({ ...season, seasonStartMonth: m })}
            />
            <DayInput
              value={season.seasonStartDay}
              onChange={(d) => onSeasonChange({ ...season, seasonStartDay: d })}
            />
          </div>
        </div>
        <div>
          <span className="mb-1 block font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
            Season end
          </span>
          <div className="flex gap-1">
            <MonthSelect
              value={season.seasonEndMonth}
              onChange={(m) => onSeasonChange({ ...season, seasonEndMonth: m })}
            />
            <DayInput
              value={season.seasonEndDay}
              onChange={(d) => onSeasonChange({ ...season, seasonEndDay: d })}
            />
          </div>
        </div>
        <div className="sm:col-span-2">
          <span className="mb-1 block font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
            Recipient name (used in report salutation)
          </span>
          <input aria-label="David"
            type="text"
            value={recipientName}
            onChange={(e) => onRecipientNameChange(e.target.value)}
            placeholder="David"
            className="w-full rounded-lg border border-[#d4d9d3] px-3 py-2 text-sm outline-none focus:border-[#1a4d2e]"
          />
        </div>
      </div>
    </div>
  );
}

function MonthSelect({
  value,
  onChange,
}: {
  value: number;
  onChange: (m: number) => void;
}) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(parseInt(e.target.value, 10))}
      className="flex-1 rounded-lg border border-[#d4d9d3] px-2 py-1.5 text-sm"
      aria-label="Month"
    >
      {Array.from({ length: 12 }, (_, i) => (
        <option key={i + 1} value={i + 1}>
          {new Date(0, i).toLocaleString("en", { month: "short" })}
        </option>
      ))}
    </select>
  );
}

function DayInput({
  value,
  onChange,
}: {
  value: number;
  onChange: (d: number) => void;
}) {
  return (
    <input
      type="number"
      min={1}
      max={31}
      value={value}
      onChange={(e) => onChange(parseInt(e.target.value, 10) || 1)}
      className="w-16 rounded-lg border border-[#d4d9d3] px-2 py-1.5 text-sm"
      aria-label="Day"
    />
  );
}

// ─── Icons (16–20px, currentColor) ──────────────────────────────────────

function QrIcon() {
  return (
    <svg width={14} height={14} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.4}>
      <rect x="2" y="2" width="5" height="5" />
      <rect x="9" y="2" width="5" height="5" />
      <rect x="2" y="9" width="5" height="5" />
      <path d="M9 9 H11 V11 H9 Z" />
      <path d="M12 9 H14 V12" />
      <path d="M9 12 V14 H14" />
    </svg>
  );
}

function GearIcon() {
  return (
    <svg width={14} height={14} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.4}>
      <circle cx="8" cy="8" r="2.2" />
      <path d="M8 1.5 V3.5 M8 12.5 V14.5 M1.5 8 H3.5 M12.5 8 H14.5 M3.3 3.3 L4.7 4.7 M11.3 11.3 L12.7 12.7 M3.3 12.7 L4.7 11.3 M11.3 4.7 L12.7 3.3" />
    </svg>
  );
}

function FieldIcon() {
  return (
    <svg width={14} height={14} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.4}>
      <path d="M2 11 L8 5 L11 8 L14 5" />
      <path d="M2 14 H14" />
    </svg>
  );
}

function ReportIcon() {
  return (
    <svg width={14} height={14} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.4}>
      <rect x="3" y="2" width="10" height="12" rx="1" />
      <path d="M5 5 H11 M5 8 H11 M5 11 H8" />
    </svg>
  );
}

function DownloadIcon() {
  return (
    <svg width={14} height={14} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.4}>
      <path d="M8 2 V10 M5 7 L8 10 L11 7" />
      <path d="M2 12 V14 H14 V12" />
    </svg>
  );
}

function KeyIcon() {
  return (
    <svg width={28} height={28} viewBox="0 0 24 24" fill="none" stroke="#1a4d2e" strokeWidth={1.6}>
      <circle cx="8" cy="12" r="4" />
      <path d="M12 12 H22 M18 12 V16 M22 12 V15" />
    </svg>
  );
}

function UserIcon() {
  return (
    <svg width={36} height={36} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.4}>
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21 C4 16 8 14 12 14 C16 14 20 16 20 21" />
    </svg>
  );
}

function TableIcon() {
  return (
    <svg width={36} height={36} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.4}>
      <rect x="3" y="4" width="18" height="16" rx="1" />
      <path d="M3 10 H21 M9 4 V20" />
    </svg>
  );
}