"use client";

import { useReducer, useEffect, useCallback } from "react";
import GlassModal from "@/components/admin/GlassModal";
import {
  getTimeTrackingWorkers,
  getTimeTrackingTasks,
  getWorkerTimeLogs,
  getTimeTrackingSummary,
  createTimeWorker,
  updateTimeWorker,
  deleteTimeWorker,
  resetTimeWorkerPin,
  createTimeTask,
  updateTimeTask,
  deleteTimeTask,
  type TimeWorker,
  type TimeTask,
  type TimeLog,
  type TimeSummary,
} from "@/actions/time-tracking";
import { formatDate } from "@/lib/format-date";
import TimeTrackingSettingsClient from "./TimeTrackingSettingsClient";
import AdminButton from "./design-system/AdminButton";
import AdminFilterTabs from "./design-system/AdminFilterTabs";

// One-color outline icons
const Icons = {
  clock: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <polyline points="12 6 12 12 16 14"/>
    </svg>
  ),
  chart: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" x2="12" y1="20" y2="10"/>
      <line x1="18" x2="18" y1="20" y2="4"/>
      <line x1="6" x2="6" y1="20" y2="16"/>
    </svg>
  ),
  user: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
      <circle cx="12" cy="7" r="4"/>
    </svg>
  ),
  clipboard: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
      <path d="M12 11h4M12 16h4M8 11h.01M8 16h.01"/>
    </svg>
  ),
  plus: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 4v16m8-8H4" />
    </svg>
  ),
  refresh: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
      <path d="M21 3v5h-5"/>
      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
      <path d="M8 16H3v5"/>
    </svg>
  ),
  download: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
      <polyline points="7 10 12 15 17 10"/>
      <line x1="12" x2="12" y1="15" y2="3"/>
    </svg>
  ),
  edit: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
    </svg>
  ),
  trash: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
    </svg>
  ),
  fileText: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
      <polyline points="14 2 14 8 20 8"/>
      <line x1="16" x2="8" y1="13" y2="13"/>
      <line x1="16" x2="8" y1="17" y2="17"/>
      <line x1="10" x2="8" y1="9" y2="9"/>
    </svg>
  ),
  timer: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="10" x2="14" y1="2" y2="2"/>
      <line x1="12" x2="15" y1="14" y2="11"/>
      <circle cx="12" cy="14" r="8"/>
    </svg>
  ),
  settings: (className: string) => (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
      <circle cx="12" cy="12" r="3"/>
    </svg>
  ),
};

const PAGE_SIZE = 50;

// ── Status Badge ─────────────────────────────────────────────────────────────

function StatusBadge({ active }: { active: boolean }) {
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-bold ${
      active ? "bg-green-100 text-green-700" : "bg-stone-100 text-stone-500"
    }`}>
      <span className={`h-1.5 w-1.5 rounded-full ${active ? "bg-green-500" : "bg-stone-400"}`} />
      {active ? "Active" : "Inactive"}
    </span>
  );
}

// ── Formatters ────────────────────────────────────────────────────────────────

function formatHours(h: number): string {
  return h < 1 ? `${(h * 60).toFixed(0)}m` : `${h.toFixed(1)}h`;
}

function formatMinutes(minutes: number): string {
  const h = minutes / 60;
  return h < 1 ? `${minutes}m` : `${h.toFixed(1)}h`;
}

// ── Types & Constants ────────────────────────────────────────────────────────

type Tab = "summary" | "workers" | "tasks" | "logs" | "settings";

type LogsView = {
  dateRange: { start: string; end: string };
  selectedWorker: string;
  selectedTask: string;
  page: number;
};

const TABS = [
  { value: "summary", label: "Summary", icon: Icons.chart("h-4 w-4") },
  { value: "workers", label: "Workers", icon: Icons.user("h-4 w-4") },
  { value: "tasks", label: "Tasks", icon: Icons.clipboard("h-4 w-4") },
  { value: "logs", label: "Logs", icon: Icons.clock("h-4 w-4") },
  { value: "settings", label: "Settings", icon: Icons.settings("h-4 w-4") },
];

// ── Reducer: TimeTrackingAdminPanel ──────────────────────────────────────────

type State = {
  tab: Tab;
  workers: TimeWorker[];
  tasks: TimeTask[];
  logs: TimeLog[];
  summary: TimeSummary | null;
  loading: boolean;
  logsView: LogsView;
  workerModal: TimeWorker | null | "new";
  taskModal: TimeTask | null | "new";
  exportModal: boolean;
  logModal: TimeLog | null;
};

type Action =
  | { type: "SET_TAB"; tab: Tab }
  | { type: "SET_WORKERS"; workers: TimeWorker[] }
  | { type: "SET_TASKS"; tasks: TimeTask[] }
  | { type: "SET_LOGS"; logs: TimeLog[] }
  | { type: "SET_SUMMARY"; summary: TimeSummary | null }
  | { type: "SET_LOADING"; loading: boolean }
  | {
      type: "LOAD_DATA";
      workers: TimeWorker[];
      tasks: TimeTask[];
      summary: TimeSummary | null;
      logs: TimeLog[];
    }
  | { type: "SET_DATE_RANGE_START"; value: string }
  | { type: "SET_DATE_RANGE_END"; value: string }
  | { type: "SET_SELECTED_WORKER"; value: string }
  | { type: "SET_SELECTED_TASK"; value: string }
  | { type: "SET_LOG_PAGE"; page: number }
  | { type: "OPEN_WORKER_MODAL"; worker: TimeWorker | null | "new" }
  | { type: "CLOSE_WORKER_MODAL" }
  | { type: "OPEN_TASK_MODAL"; task: TimeTask | null | "new" }
  | { type: "CLOSE_TASK_MODAL" }
  | { type: "OPEN_EXPORT_MODAL" }
  | { type: "CLOSE_EXPORT_MODAL" }
  | { type: "OPEN_LOG_MODAL"; log: TimeLog }
  | { type: "CLOSE_LOG_MODAL" };

function computeInitialTab(): Tab {
  if (typeof window !== "undefined") {
    const params = new URLSearchParams(window.location.search);
    const t = params.get("tab");
    if (t === "tasks" || t === "workers") return t as Tab;
  }
  return "summary";
}

function computeInitialLogsView(): LogsView {
  const now = new Date();
  const start = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10);
  return {
    dateRange: { start, end: now.toISOString().slice(0, 10) },
    selectedWorker: "",
    selectedTask: "",
    page: 0,
  };
}

const initialState: State = {
  tab: computeInitialTab(),
  workers: [],
  tasks: [],
  logs: [],
  summary: null,
  loading: true,
  logsView: computeInitialLogsView(),
  workerModal: null,
  taskModal: null,
  exportModal: false,
  logModal: null,
};

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "SET_TAB":
      return { ...state, tab: action.tab };
    case "SET_WORKERS":
      return { ...state, workers: action.workers };
    case "SET_TASKS":
      return { ...state, tasks: action.tasks };
    case "SET_LOGS":
      return { ...state, logs: action.logs };
    case "SET_SUMMARY":
      return { ...state, summary: action.summary };
    case "SET_LOADING":
      return { ...state, loading: action.loading };
    case "LOAD_DATA":
      return {
        ...state,
        workers: action.workers,
        tasks: action.tasks,
        summary: action.summary,
        logs: action.logs,
      };
    case "SET_DATE_RANGE_START":
      if (state.logsView.dateRange.start === action.value) return state;
      return {
        ...state,
        logsView: {
          ...state.logsView,
          dateRange: { ...state.logsView.dateRange, start: action.value },
          page: 0,
        },
      };
    case "SET_DATE_RANGE_END":
      if (state.logsView.dateRange.end === action.value) return state;
      return {
        ...state,
        logsView: {
          ...state.logsView,
          dateRange: { ...state.logsView.dateRange, end: action.value },
          page: 0,
        },
      };
    case "SET_SELECTED_WORKER":
      if (state.logsView.selectedWorker === action.value) return state;
      return {
        ...state,
        logsView: { ...state.logsView, selectedWorker: action.value, page: 0 },
      };
    case "SET_SELECTED_TASK":
      if (state.logsView.selectedTask === action.value) return state;
      return {
        ...state,
        logsView: { ...state.logsView, selectedTask: action.value, page: 0 },
      };
    case "SET_LOG_PAGE":
      return { ...state, logsView: { ...state.logsView, page: action.page } };
    case "OPEN_WORKER_MODAL":
      return { ...state, workerModal: action.worker };
    case "CLOSE_WORKER_MODAL":
      return { ...state, workerModal: null };
    case "OPEN_TASK_MODAL":
      return { ...state, taskModal: action.task };
    case "CLOSE_TASK_MODAL":
      return { ...state, taskModal: null };
    case "OPEN_EXPORT_MODAL":
      return { ...state, exportModal: true };
    case "CLOSE_EXPORT_MODAL":
      return { ...state, exportModal: false };
    case "OPEN_LOG_MODAL":
      return { ...state, logModal: action.log };
    case "CLOSE_LOG_MODAL":
      return { ...state, logModal: null };
  }
}

// ── Main Component ───────────────────────────────────────────────────────────

export default function TimeTrackingAdminPanel({ brandId }: { brandId?: string }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  const dateRange = state.logsView.dateRange;
  const selectedWorker = state.logsView.selectedWorker;
  const selectedTask = state.logsView.selectedTask;
  const logPage = state.logsView.page;

  const load = useCallback(async () => {
    if (!brandId) return;
    dispatch({ type: "SET_LOADING", loading: true });
    const [w, t, s, l] = await Promise.all([
      getTimeTrackingWorkers(brandId),
      getTimeTrackingTasks(brandId, false),
      getTimeTrackingSummary(brandId, dateRange.start, dateRange.end),
      getWorkerTimeLogs(brandId, {
        workerId: selectedWorker || undefined,
        taskId: selectedTask || undefined,
        start: dateRange.start,
        end: dateRange.end,
        limit: PAGE_SIZE,
        offset: logPage * PAGE_SIZE,
      }),
    ]);
    dispatch({
      type: "LOAD_DATA",
      workers: w,
      tasks: t,
      summary: s,
      logs: l,
    });
  }, [brandId, dateRange, selectedWorker, selectedTask, logPage]);

  // Use an inline async pattern so setStates happen after an `await`, which
  // avoids the react-hooks/set-state-in-effect lint rule that fires when
  // `useEffect(() => load())` calls a function whose first statement is a
  // synchronous setState. Event handlers still call `load()` directly.
  useEffect(() => {
    if (!brandId) return;
    let cancelled = false;
    void (async () => {
      dispatch({ type: "SET_LOADING", loading: true });
      const [w, t, s, l] = await Promise.all([
        getTimeTrackingWorkers(brandId),
        getTimeTrackingTasks(brandId, false),
        getTimeTrackingSummary(brandId, dateRange.start, dateRange.end),
        getWorkerTimeLogs(brandId, {
          workerId: selectedWorker || undefined,
          taskId: selectedTask || undefined,
          start: dateRange.start,
          end: dateRange.end,
          limit: PAGE_SIZE,
          offset: logPage * PAGE_SIZE,
        }),
      ]);
      if (cancelled) return;
      dispatch({
        type: "LOAD_DATA",
        workers: w,
        tasks: t,
        summary: s,
        logs: l,
      });
    })();
    return () => { cancelled = true; };
  }, [brandId, dateRange, selectedWorker, selectedTask, logPage]);

  if (!brandId) {
    return (
      <div className="text-center py-20 text-[var(--admin-text-muted)]">
        <p className="text-sm">Select a brand to view time tracking.</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[var(--admin-bg)]">
      <PanelHeader
        tab={state.tab}
        dateRange={dateRange}
        onTabChange={(t) => dispatch({ type: "SET_TAB", tab: t })}
        onExportClick={() => dispatch({ type: "OPEN_EXPORT_MODAL" })}
      />

      {/* Content */}
      <div className="px-4 sm:px-6 md:px-8 py-4 sm:py-6">
        {/* ── Summary Tab ── */}
        {state.tab === "summary" && (
          <SummaryTab
            summary={state.summary}
            workers={state.workers}
            loading={state.loading}
            dateRange={dateRange}
            onDateStartChange={(v) => dispatch({ type: "SET_DATE_RANGE_START", value: v })}
            onDateEndChange={(v) => dispatch({ type: "SET_DATE_RANGE_END", value: v })}
            onRefresh={load}
          />
        )}

        {/* ── Workers Tab ── */}
        {state.tab === "workers" && (
          <WorkersTab
            workers={state.workers}
            onAdd={() => dispatch({ type: "OPEN_WORKER_MODAL", worker: "new" })}
            onEdit={(w) => dispatch({ type: "OPEN_WORKER_MODAL", worker: w })}
            brandId={brandId}
            onSave={() => {
              void load();
              dispatch({ type: "CLOSE_WORKER_MODAL" });
            }}
          />
        )}

        {/* ── Tasks Tab ── */}
        {state.tab === "tasks" && (
          <TasksTab
            tasks={state.tasks}
            onAdd={() => dispatch({ type: "OPEN_TASK_MODAL", task: "new" })}
            onEdit={(t) => dispatch({ type: "OPEN_TASK_MODAL", task: t })}
            brandId={brandId}
            onSave={() => {
              void load();
              dispatch({ type: "CLOSE_TASK_MODAL" });
            }}
          />
        )}

        {/* ── Logs Tab ── */}
        {state.tab === "logs" && (
          <LogsTab
            logs={state.logs}
            workers={state.workers}
            tasks={state.tasks}
            dateRange={dateRange}
            onDateStartChange={(v) => dispatch({ type: "SET_DATE_RANGE_START", value: v })}
            onDateEndChange={(v) => dispatch({ type: "SET_DATE_RANGE_END", value: v })}
            selectedWorker={selectedWorker}
            onSelectedWorkerChange={(v) => dispatch({ type: "SET_SELECTED_WORKER", value: v })}
            selectedTask={selectedTask}
            onSelectedTaskChange={(v) => dispatch({ type: "SET_SELECTED_TASK", value: v })}
            loading={state.loading}
            onRefresh={load}
            onViewLog={(log) => dispatch({ type: "OPEN_LOG_MODAL", log })}
          />
        )}

        {/* ── Settings Tab ── */}
        {state.tab === "settings" && (
          <div className="rounded-2xl border border-[var(--admin-border)] bg-white p-4 sm:p-6">
            <div className="flex items-center gap-2 sm:gap-3 mb-6">
              <div className="flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg sm:rounded-xl bg-[var(--admin-text-primary)]">
                {Icons.settings("w-4 h-4 sm:w-5 sm:h-5 text-[var(--admin-bg)]")}
              </div>
              <div>
                <h2 className="text-sm sm:text-lg font-bold text-[var(--admin-text-primary)]">Time Tracking Settings</h2>
                <p className="text-[10px] sm:text-xs text-[var(--admin-text-muted)]">Configure your time tracking workflow</p>
              </div>
            </div>
            <TimeTrackingSettingsClient brandId={brandId} />
          </div>
        )}
      </div>

      {/* Worker Modal */}
      {state.workerModal !== null && (
        <WorkerModal
          worker={state.workerModal === "new" ? null : state.workerModal}
          brandId={brandId}
          onClose={() => dispatch({ type: "CLOSE_WORKER_MODAL" })}
          onSave={(saved) => {
            if (saved) void load();
            dispatch({ type: "CLOSE_WORKER_MODAL" });
          }}
        />
      )}

      {/* Task Modal */}
      {state.taskModal !== null && (
        <TaskModal
          task={state.taskModal === "new" ? null : state.taskModal}
          brandId={brandId}
          onClose={() => dispatch({ type: "CLOSE_TASK_MODAL" })}
          onSave={(saved) => {
            if (saved) void load();
            dispatch({ type: "CLOSE_TASK_MODAL" });
          }}
        />
      )}

      {state.exportModal && (
        <ExportModal
          dateRange={dateRange}
          brandId={brandId}
          onClose={() => dispatch({ type: "CLOSE_EXPORT_MODAL" })}
        />
      )}

      {state.logModal && (
        <LogDetailModal
          log={state.logModal}
          onClose={() => dispatch({ type: "CLOSE_LOG_MODAL" })}
        />
      )}
    </div>
  );
}

// ── Panel Header ────────────────────────────────────────────────────────────

type PanelHeaderProps = {
  tab: Tab;
  dateRange: { start: string; end: string };
  onTabChange: (t: Tab) => void;
  onExportClick: () => void;
};

function PanelHeader({ tab, dateRange, onTabChange, onExportClick }: PanelHeaderProps) {
  return (
    <div className="px-4 sm:px-6 md:px-8 pt-4 sm:pt-6 pb-2">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-xl bg-[var(--admin-accent)]">
            {Icons.clock("h-5 w-5 sm:h-6 sm:w-6 text-white")}
          </div>
          <div>
            <h1 className="text-xl sm:text-2xl font-black text-[var(--admin-text-primary)] tracking-tight">Time Tracking</h1>
            <p className="text-xs text-[var(--admin-text-muted)]">{dateRange.start} — {dateRange.end}</p>
          </div>
        </div>
        <AdminButton
          onClick={onExportClick}
          icon={Icons.download("h-4 w-4")}
          variant="secondary"
        >
          Export
        </AdminButton>
      </div>

      {/* Tab navigation - using AdminFilterTabs */}
      <AdminFilterTabs
        activeTab={tab}
        onTabChange={(t) => onTabChange(t as Tab)}
        tabs={TABS}
        size="md"
        showCounts={false}
      />
    </div>
  );
}

// ── Summary Tab ──────────────────────────────────────────────────────────────

type SummaryTabProps = {
  summary: TimeSummary | null;
  workers: TimeWorker[];
  loading: boolean;
  dateRange: { start: string; end: string };
  onDateStartChange: (v: string) => void;
  onDateEndChange: (v: string) => void;
  onRefresh: () => void;
};

function SummaryTab({
  summary,
  workers,
  loading,
  dateRange,
  onDateStartChange,
  onDateEndChange,
  onRefresh,
}: SummaryTabProps) {
  return (
    <div className="space-y-5">
      {/* Filters */}
      <div className="rounded-2xl border border-[var(--admin-border)] bg-white p-4">
        <div className="flex flex-wrap gap-4 items-end">
          <div className="space-y-1">
            <label htmlFor="fld-1-from"  className="text-xs text-[var(--admin-text-muted)] font-medium">From</label>
            <input id="fld-1-from"  aria-label="Date"
              type="date"
              value={dateRange.start}
              onChange={(e) => onDateStartChange(e.target.value)}
              className="px-3 py-2 rounded-lg border border-[var(--admin-border)] bg-white text-[var(--admin-text-primary)] text-sm focus:outline-none focus:border-[var(--admin-accent)]"
            />
          </div>
          <div className="space-y-1">
            <label htmlFor="fld-2-to"  className="text-xs text-[var(--admin-text-muted)] font-medium">To</label>
            <input id="fld-2-to"  aria-label="Date"
              type="date"
              value={dateRange.end}
              onChange={(e) => onDateEndChange(e.target.value)}
              className="px-3 py-2 rounded-lg border border-[var(--admin-border)] bg-white text-[var(--admin-text-primary)] text-sm focus:outline-none focus:border-[var(--admin-accent)]"
            />
          </div>
          <AdminButton onClick={onRefresh} icon={Icons.refresh("h-4 w-4")}>
            Refresh
          </AdminButton>
        </div>
      </div>

      {/* Loading */}
      {loading ? (
        <div className="flex items-center justify-center py-16">
          <div className="flex items-center gap-3 text-[var(--admin-text-muted)]">
            <svg className="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>
            <span className="text-sm font-medium">Loading...</span>
          </div>
        </div>
      ) : summary ? (
        <>
          {/* Stats */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
            <div className="rounded-2xl border border-[var(--admin-border)] bg-white p-5">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-[var(--admin-text-muted)]">{Icons.timer("h-4 w-4")}</span>
                <span className="text-xs font-semibold text-[var(--admin-text-muted)] uppercase tracking-wider">Total Hours</span>
              </div>
              <p className="text-3xl font-black text-[var(--admin-text-primary)]">{formatMinutes(summary.totals.total_hours * 60)}</p>
              <p className="text-xs text-[var(--admin-text-muted)] mt-1">{summary.totals.entry_count} entries</p>
            </div>
            <div className="rounded-2xl border border-[var(--admin-border)] bg-white p-5">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-[var(--admin-text-muted)]">{Icons.fileText("h-4 w-4")}</span>
                <span className="text-xs font-semibold text-[var(--admin-text-muted)] uppercase tracking-wider">Entries</span>
              </div>
              <p className="text-3xl font-black text-[var(--admin-text-primary)]">{summary.totals.entry_count}</p>
              <p className="text-xs text-[var(--admin-text-muted)] mt-1">This period</p>
            </div>
            <div className="rounded-2xl border border-[var(--admin-border)] bg-white p-5">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-[var(--admin-text-muted)]">{Icons.clock("h-4 w-4")}</span>
                <span className="text-xs font-semibold text-[var(--admin-text-muted)] uppercase tracking-wider">Open Clock-ins</span>
              </div>
              <p className="text-3xl font-black text-[var(--admin-text-primary)]">{summary.totals.open_count}</p>
              <p className="text-xs text-[var(--admin-text-muted)] mt-1">In progress</p>
            </div>
            <div className="rounded-2xl border border-[var(--admin-border)] bg-white p-5">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-[var(--admin-text-muted)]">{Icons.user("h-4 w-4")}</span>
                <span className="text-xs font-semibold text-[var(--admin-text-muted)] uppercase tracking-wider">Workers</span>
              </div>
              <p className="text-3xl font-black text-[var(--admin-text-primary)]">{workers.length}</p>
              <p className="text-xs text-[var(--admin-text-muted)] mt-1">Active</p>
            </div>
          </div>

          {/* By Worker Table */}
          <div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
            <div className="px-5 py-4 border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
              <h3 className="text-sm font-bold text-[var(--admin-text-primary)]">By Worker</h3>
            </div>
            <table className="w-full">
              <thead>
                <tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
                  <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Worker</th>
                  <th className="px-5 py-3 text-right text-xs font-bold text-[var(--admin-text-muted)] uppercase">Entries</th>
                  <th className="px-5 py-3 text-right text-xs font-bold text-[var(--admin-text-muted)] uppercase">Total Hours</th>
                </tr>
              </thead>
              <tbody>
                {(summary.by_worker ?? []).length === 0 ? (
                  <tr><td colSpan={3} className="px-5 py-8 text-center text-[var(--admin-text-muted)]">No data</td></tr>
                ) : (
                  (summary.by_worker ?? []).map((w) => (
                    <tr key={w.id} className="border-b border-[var(--admin-border)] last:border-0 hover:bg-[var(--admin-bg-subtle)] transition-colors">
                      <td className="px-5 py-4 text-sm font-semibold text-[var(--admin-text-primary)]">{w.name}</td>
                      <td className="px-5 py-4 text-sm text-[var(--admin-text-secondary)] text-right">{w.entry_count}</td>
                      <td className="px-5 py-4 text-sm font-semibold text-[var(--admin-text-primary)] text-right">{formatMinutes(w.total_hours * 60)}</td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </>
      ) : (
        <div className="text-center py-16 text-[var(--admin-text-muted)]">
          <p className="text-sm">No summary data available</p>
        </div>
      )}
    </div>
  );
}

// ── Workers Tab ───────────────────────────────────────────────────────────────

type WorkersTabProps = {
  workers: TimeWorker[];
  onAdd: () => void;
  onEdit: (w: TimeWorker) => void;
  brandId: string;
  onSave: () => void;
};

function WorkersTab({ workers, onAdd, onEdit, brandId, onSave }: WorkersTabProps) {
  return (
    <div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
      <div className="px-5 py-4 border-b border-[var(--admin-border)] flex items-center justify-between bg-[var(--admin-bg-subtle)]">
        <h3 className="text-sm font-bold text-[var(--admin-text-primary)]">Workers ({workers.length})</h3>
        <AdminButton onClick={onAdd} icon={Icons.plus("h-4 w-4")}>
          Add Worker
        </AdminButton>
      </div>
      <table className="w-full">
        <thead>
          <tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
            <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Name</th>
            <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">PIN</th>
            <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Status</th>
            <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Language</th>
            <th className="px-5 py-3" aria-label="Actions"></th>
          </tr>
        </thead>
        <tbody>
          {workers.length === 0 ? (
            <tr><td colSpan={5} className="px-5 py-8 text-center text-[var(--admin-text-muted)]">No workers yet</td></tr>
          ) : (
            workers.map((w) => (
              <tr key={w.id} className="border-b border-[var(--admin-border)] last:border-0 hover:bg-[var(--admin-bg-subtle)] transition-colors">
                <td className="px-5 py-4 text-sm font-semibold text-[var(--admin-text-primary)]">{w.name}</td>
                <td className="px-5 py-4 text-sm font-mono text-[var(--admin-text-secondary)]">{w.pin || "—"}</td>
                <td className="px-5 py-4"><StatusBadge active={w.active} /></td>
                <td className="px-5 py-4 text-sm text-[var(--admin-text-muted)]">{w.lang?.toUpperCase() ?? "EN"}</td>
                <td className="px-5 py-4 text-right">
                  <button type="button" onClick={() => onEdit(w)} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-secondary)]">
                    {Icons.edit("h-4 w-4")}
                  </button>
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}

// ── Tasks Tab ────────────────────────────────────────────────────────────────

type TasksTabProps = {
  tasks: TimeTask[];
  onAdd: () => void;
  onEdit: (t: TimeTask) => void;
  brandId: string;
  onSave: () => void;
};

function TasksTab({ tasks, onAdd, onEdit, brandId, onSave }: TasksTabProps) {
  return (
    <div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
      <div className="px-5 py-4 border-b border-[var(--admin-border)] flex items-center justify-between bg-[var(--admin-bg-subtle)]">
        <h3 className="text-sm font-bold text-[var(--admin-text-primary)]">Tasks ({tasks.length})</h3>
        <AdminButton onClick={onAdd} icon={Icons.plus("h-4 w-4")}>
          Add Task
        </AdminButton>
      </div>
      <table className="w-full">
        <thead>
          <tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
            <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Name</th>
            <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Unit</th>
            <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Status</th>
            <th className="px-5 py-3" aria-label="Actions"></th>
          </tr>
        </thead>
        <tbody>
          {tasks.length === 0 ? (
            <tr><td colSpan={4} className="px-5 py-8 text-center text-[var(--admin-text-muted)]">No tasks yet</td></tr>
          ) : (
            tasks.map((t) => (
              <tr key={t.id} className="border-b border-[var(--admin-border)] last:border-0 hover:bg-[var(--admin-bg-subtle)] transition-colors">
                <td className="px-5 py-4">
                  <div className="text-sm font-semibold text-[var(--admin-text-primary)]">{t.name}</div>
                  {t.name_es && <div className="text-xs text-[var(--admin-text-muted)]">{t.name_es}</div>}
                </td>
                <td className="px-5 py-4 text-sm text-[var(--admin-text-secondary)] capitalize">{t.unit || "hours"}</td>
                <td className="px-5 py-4"><StatusBadge active={t.active} /></td>
                <td className="px-5 py-4 text-right">
                  <button type="button" onClick={() => onEdit(t)} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-secondary)]">
                    {Icons.edit("h-4 w-4")}
                  </button>
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}

// ── Logs Tab ─────────────────────────────────────────────────────────────────

type LogsTabProps = {
  logs: TimeLog[];
  workers: TimeWorker[];
  tasks: TimeTask[];
  dateRange: { start: string; end: string };
  onDateStartChange: (v: string) => void;
  onDateEndChange: (v: string) => void;
  selectedWorker: string;
  onSelectedWorkerChange: (v: string) => void;
  selectedTask: string;
  onSelectedTaskChange: (v: string) => void;
  loading: boolean;
  onRefresh: () => void;
  onViewLog: (log: TimeLog) => void;
};

function LogsTab({
  logs,
  workers,
  tasks,
  dateRange,
  onDateStartChange,
  onDateEndChange,
  selectedWorker,
  onSelectedWorkerChange,
  selectedTask,
  onSelectedTaskChange,
  loading,
  onRefresh,
  onViewLog,
}: LogsTabProps) {
  return (
    <div className="space-y-5">
      {/* Filters */}
      <div className="rounded-2xl border border-[var(--admin-border)] bg-white p-4">
        <div className="flex flex-wrap gap-4 items-end">
          <div className="space-y-1">
            <label htmlFor="fld-3-from-2"  className="text-xs text-[var(--admin-text-muted)] font-medium">From</label>
            <input id="fld-3-from-2"  aria-label="Date"
              type="date"
              value={dateRange.start}
              onChange={(e) => onDateStartChange(e.target.value)}
              className="px-3 py-2 rounded-lg border border-[var(--admin-border)] bg-white text-[var(--admin-text-primary)] text-sm focus:outline-none focus:border-[var(--admin-accent)]"
            />
          </div>
          <div className="space-y-1">
            <label htmlFor="fld-4-to-2"  className="text-xs text-[var(--admin-text-muted)] font-medium">To</label>
            <input id="fld-4-to-2"  aria-label="Date"
              type="date"
              value={dateRange.end}
              onChange={(e) => onDateEndChange(e.target.value)}
              className="px-3 py-2 rounded-lg border border-[var(--admin-border)] bg-white text-[var(--admin-text-primary)] text-sm focus:outline-none focus:border-[var(--admin-accent)]"
            />
          </div>
          <div className="space-y-1">
            <label htmlFor="fld-5-worker"  className="text-xs text-[var(--admin-text-muted)] font-medium">Worker</label>
            <select id="fld-5-worker"  aria-label="Select"
              value={selectedWorker}
              onChange={(e) => onSelectedWorkerChange(e.target.value)}
              className="px-3 py-2 rounded-lg border border-[var(--admin-border)] bg-white text-[var(--admin-text-primary)] text-sm focus:outline-none focus:border-[var(--admin-accent)] min-w-[160px]"
            >
              <option value="">All Workers</option>
              {workers.map((w) => (
                <option key={w.id} value={w.id}>{w.name}</option>
              ))}
            </select>
          </div>
          <div className="space-y-1">
            <label htmlFor="fld-6-task"  className="text-xs text-[var(--admin-text-muted)] font-medium">Task</label>
            <select id="fld-6-task"  aria-label="Select"
              value={selectedTask}
              onChange={(e) => onSelectedTaskChange(e.target.value)}
              className="px-3 py-2 rounded-lg border border-[var(--admin-border)] bg-white text-[var(--admin-text-primary)] text-sm focus:outline-none focus:border-[var(--admin-accent)] min-w-[160px]"
            >
              <option value="">All Tasks</option>
              {tasks.map((t) => (
                <option key={t.id} value={t.id}>{t.name}</option>
              ))}
            </select>
          </div>
          <AdminButton onClick={onRefresh} icon={Icons.refresh("h-4 w-4")}>
            Refresh
          </AdminButton>
        </div>
      </div>

      {/* Logs Table */}
      {loading ? (
        <div className="flex items-center justify-center py-16">
          <div className="flex items-center gap-3 text-[var(--admin-text-muted)]">
            <svg className="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
            </svg>
            <span className="text-sm font-medium">Loading...</span>
          </div>
        </div>
      ) : (
        <div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
          <div className="px-5 py-4 border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
            <h3 className="text-sm font-bold text-[var(--admin-text-primary)]">Time Logs</h3>
          </div>
          <table className="w-full">
            <thead>
              <tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
                <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Worker</th>
                <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Task</th>
                <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Clock In</th>
                <th className="px-5 py-3 text-left text-xs font-bold text-[var(--admin-text-muted)] uppercase">Clock Out</th>
                <th className="px-5 py-3 text-right text-xs font-bold text-[var(--admin-text-muted)] uppercase">Duration</th>
              </tr>
            </thead>
            <tbody>
              {logs.length === 0 ? (
                <tr><td colSpan={5} className="px-5 py-8 text-center text-[var(--admin-text-muted)]">No logs yet</td></tr>
              ) : (
                logs.map((log) => (
                  <tr key={log.id} className="border-b border-[var(--admin-border)] last:border-0 hover:bg-[var(--admin-bg-subtle)] transition-colors cursor-pointer" onClick={() => onViewLog(log)}>
                    <td className="px-5 py-4 text-sm font-semibold text-[var(--admin-text-primary)]">{log.worker_name}</td>
                    <td className="px-5 py-4 text-sm text-[var(--admin-text-secondary)]">{log.task_name || "—"}</td>
                    <td className="px-5 py-4 text-sm text-[var(--admin-text-muted)]">{log.clock_in ? formatDate(log.clock_in) : "—"}</td>
                    <td className="px-5 py-4 text-sm text-[var(--admin-text-muted)]">{log.clock_out ? formatDate(log.clock_out) : "Open"}</td>
                    <td className="px-5 py-4 text-sm font-semibold text-[var(--admin-text-primary)] text-right">{formatMinutes(log.total_minutes)}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// ── Export Modal ────────────────────────────────────────────────────────────

type ExportModalProps = {
  dateRange: { start: string; end: string };
  brandId: string;
  onClose: () => void;
};

function ExportModal({ dateRange, brandId, onClose }: ExportModalProps) {
  return (
    <GlassModal title="Export Time Logs" onClose={onClose}>
      <div className="p-6">
        <p className="text-sm text-[var(--admin-text-secondary)] mb-4">Download time logs for the selected date range.</p>
        <AdminButton
          onClick={() => {
            window.location.href = `/api/time-tracking/export?brandId=${brandId}&start=${dateRange.start}&end=${dateRange.end}`;
            onClose();
          }}
          icon={Icons.download("h-4 w-4")}
          fullWidth
        >
          Download CSV
        </AdminButton>
      </div>
    </GlassModal>
  );
}

// ── Log Detail Modal ────────────────────────────────────────────────────────

type LogDetailModalProps = {
  log: TimeLog;
  onClose: () => void;
};

function LogDetailModal({ log, onClose }: LogDetailModalProps) {
  return (
    <GlassModal title="Time Log Detail" onClose={onClose}>
      <div className="p-6 space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-wider mb-1">Worker</p>
            <p className="text-sm font-semibold text-[var(--admin-text-primary)]">{log.worker_name}</p>
          </div>
          <div>
            <p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-wider mb-1">Task</p>
            <p className="text-sm font-semibold text-[var(--admin-text-primary)]">{log.task_name || "—"}</p>
          </div>
          <div>
            <p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-wider mb-1">Clock In</p>
            <p className="text-sm font-semibold text-[var(--admin-text-primary)]">{log.clock_in ? formatDate(log.clock_in) : "—"}</p>
          </div>
          <div>
            <p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-wider mb-1">Clock Out</p>
            <p className="text-sm font-semibold text-[var(--admin-text-primary)]">{log.clock_out ? formatDate(log.clock_out) : "Open"}</p>
          </div>
          <div>
            <p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-wider mb-1">Duration</p>
            <p className="text-sm font-semibold text-[var(--admin-text-primary)]">{formatMinutes(log.total_minutes)}</p>
          </div>
          <div>
            <p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-wider mb-1">Notes</p>
            <p className="text-sm text-[var(--admin-text-secondary)]">{log.notes || "—"}</p>
          </div>
        </div>
      </div>
    </GlassModal>
  );
}

// ── Worker Modal ─────────────────────────────────────────────────────────────

type WorkerFormState = {
  name: string;
  role: string;
  lang: string;
  active: boolean;
  loading: boolean;
};

type WorkerFormAction =
  | { type: "SET_NAME"; value: string }
  | { type: "SET_ROLE"; value: string }
  | { type: "SET_LANG"; value: string }
  | { type: "SET_ACTIVE"; value: boolean }
  | { type: "SET_LOADING"; value: boolean };

function initWorkerFormState(worker: TimeWorker | null): WorkerFormState {
  return {
    name: worker?.name ?? "",
    role: worker?.role ?? "worker",
    lang: worker?.lang ?? "en",
    active: worker?.active ?? true,
    loading: false,
  };
}

function workerFormReducer(state: WorkerFormState, action: WorkerFormAction): WorkerFormState {
  switch (action.type) {
    case "SET_NAME":
      return { ...state, name: action.value };
    case "SET_ROLE":
      return { ...state, role: action.value };
    case "SET_LANG":
      return { ...state, lang: action.value };
    case "SET_ACTIVE":
      return { ...state, active: action.value };
    case "SET_LOADING":
      return { ...state, loading: action.value };
  }
}

type WorkerModalProps = {
  worker: TimeWorker | null;
  brandId: string;
  onClose: () => void;
  onSave: (saved: boolean) => void;
};

function WorkerModal({ worker, brandId, onClose, onSave }: WorkerModalProps) {
  const [state, dispatch] = useReducer(workerFormReducer, worker, initWorkerFormState);
  const isEdit = !!worker;

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    dispatch({ type: "SET_LOADING", value: true });
    try {
      if (isEdit && worker) {
        await updateTimeWorker(worker.id, state.name, state.role, state.lang, state.active);
      } else {
        await createTimeWorker(brandId, state.name, state.role, state.lang);
      }
      onSave(true);
    } catch {
      onSave(false);
    }
    dispatch({ type: "SET_LOADING", value: false });
  }

  async function handleResetPin() {
    if (!worker) return;
    dispatch({ type: "SET_LOADING", value: true });
    await resetTimeWorkerPin(worker.id);
    dispatch({ type: "SET_LOADING", value: false });
  }

  async function handleDelete() {
    if (!worker || !confirm("Delete this worker?")) return;
    dispatch({ type: "SET_LOADING", value: true });
    await deleteTimeWorker(worker.id);
    onSave(true);
    dispatch({ type: "SET_LOADING", value: false });
  }

  return (
    <GlassModal title={isEdit ? "Edit Worker" : "Add Worker"} onClose={onClose}>
      <form onSubmit={handleSubmit} className="p-6 space-y-4">
        <div>
          <label htmlFor="fld-7-name"  className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Name *</label>
          <input id="fld-7-name"  aria-label="Input" value={state.name} onChange={(e) => dispatch({ type: "SET_NAME", value: e.target.value })} required className="w-full rounded-lg border border-[var(--admin-border)] px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--admin-accent)]" />
        </div>
        <div>
          <label htmlFor="fld-8-role"  className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Role</label>
          <select id="fld-8-role"  aria-label="Select" value={state.role} onChange={(e) => dispatch({ type: "SET_ROLE", value: e.target.value })} className="w-full rounded-lg border border-[var(--admin-border)] px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--admin-accent)]">
            <option value="worker">Worker</option>
            <option value="supervisor">Supervisor</option>
            <option value="admin">Admin</option>
          </select>
        </div>
        <div>
          <label htmlFor="fld-9-language"  className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Language</label>
          <select id="fld-9-language"  aria-label="Select" value={state.lang} onChange={(e) => dispatch({ type: "SET_LANG", value: e.target.value })} className="w-full rounded-lg border border-[var(--admin-border)] px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--admin-accent)]">
            <option value="en">English</option>
            <option value="es">Español</option>
          </select>
        </div>
        <label className="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" checked={state.active} onChange={(e) => dispatch({ type: "SET_ACTIVE", value: e.target.checked })} className="rounded border-[var(--admin-border)]" />
          <span className="text-sm text-[var(--admin-text-secondary)]">Active</span>
        </label>
        <div className="flex gap-2 pt-2">
          {isEdit && worker && (
            <>
              <AdminButton type="button" variant="secondary" size="sm" onClick={handleResetPin} disabled={state.loading} icon={Icons.refresh("h-3.5 w-3.5")}>
                Reset PIN
              </AdminButton>
              <AdminButton type="button" variant="danger" size="sm" onClick={handleDelete} disabled={state.loading} icon={Icons.trash("h-3.5 w-3.5")}>
                Delete
              </AdminButton>
            </>
          )}
          <AdminButton type="submit" disabled={state.loading} isLoading={state.loading} className="ml-auto">
            {state.loading ? "Saving..." : isEdit ? "Update" : "Create"}
          </AdminButton>
        </div>
      </form>
    </GlassModal>
  );
}

// ── Task Modal ───────────────────────────────────────────────────────────────

type TaskFormState = {
  name: string;
  nameEs: string;
  unit: string;
  active: boolean;
  loading: boolean;
};

type TaskFormAction =
  | { type: "SET_NAME"; value: string }
  | { type: "SET_NAME_ES"; value: string }
  | { type: "SET_UNIT"; value: string }
  | { type: "SET_ACTIVE"; value: boolean }
  | { type: "SET_LOADING"; value: boolean };

function initTaskFormState(task: TimeTask | null): TaskFormState {
  return {
    name: task?.name ?? "",
    nameEs: task?.name_es ?? "",
    unit: task?.unit ?? "hours",
    active: task?.active ?? true,
    loading: false,
  };
}

function taskFormReducer(state: TaskFormState, action: TaskFormAction): TaskFormState {
  switch (action.type) {
    case "SET_NAME":
      return { ...state, name: action.value };
    case "SET_NAME_ES":
      return { ...state, nameEs: action.value };
    case "SET_UNIT":
      return { ...state, unit: action.value };
    case "SET_ACTIVE":
      return { ...state, active: action.value };
    case "SET_LOADING":
      return { ...state, loading: action.value };
  }
}

type TaskModalProps = {
  task: TimeTask | null;
  brandId: string;
  onClose: () => void;
  onSave: (saved: boolean) => void;
};

function TaskModal({ task, brandId, onClose, onSave }: TaskModalProps) {
  const [state, dispatch] = useReducer(taskFormReducer, task, initTaskFormState);
  const isEdit = !!task;

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    dispatch({ type: "SET_LOADING", value: true });
    try {
      if (isEdit && task) {
        await updateTimeTask(task.id, state.name, state.nameEs, state.unit, state.active, task.sort_order);
      } else {
        await createTimeTask(brandId, state.name, state.nameEs || null, state.unit);
      }
      onSave(true);
    } catch {
      onSave(false);
    }
    dispatch({ type: "SET_LOADING", value: false });
  }

  async function handleDelete() {
    if (!task || !confirm("Delete this task?")) return;
    dispatch({ type: "SET_LOADING", value: true });
    await deleteTimeTask(task.id);
    onSave(true);
    dispatch({ type: "SET_LOADING", value: false });
  }

  return (
    <GlassModal title={isEdit ? "Edit Task" : "Add Task"} onClose={onClose}>
      <form onSubmit={handleSubmit} className="p-6 space-y-4">
        <div>
          <label htmlFor="fld-10-task-name"  className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Task Name *</label>
          <input id="fld-10-task-name"  aria-label="., Harvesting" value={state.name} onChange={(e) => dispatch({ type: "SET_NAME", value: e.target.value })} required placeholder="e.g., Harvesting" className="w-full rounded-lg border border-[var(--admin-border)] px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--admin-accent)]" />
        </div>
        <div>
          <label htmlFor="fld-11-name-in-spanish"  className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Name in Spanish</label>
          <input id="fld-11-name-in-spanish"  aria-label="., Cosecha" value={state.nameEs} onChange={(e) => dispatch({ type: "SET_NAME_ES", value: e.target.value })} placeholder="e.g., Cosecha" className="w-full rounded-lg border border-[var(--admin-border)] px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--admin-accent)]" />
        </div>
        <div>
          <label htmlFor="fld-12-unit"  className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Unit</label>
          <select id="fld-12-unit"  aria-label="Select" value={state.unit} onChange={(e) => dispatch({ type: "SET_UNIT", value: e.target.value })} className="w-full rounded-lg border border-[var(--admin-border)] px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--admin-accent)]">
            <option value="hours">Hours</option>
            <option value="pieces">Pieces</option>
            <option value="units">Units</option>
          </select>
        </div>
        <label className="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" checked={state.active} onChange={(e) => dispatch({ type: "SET_ACTIVE", value: e.target.checked })} className="rounded border-[var(--admin-border)]" />
          <span className="text-sm text-[var(--admin-text-secondary)]">Active</span>
        </label>
        <div className="flex gap-2 pt-2">
          {isEdit && task && (
            <AdminButton type="button" variant="danger" size="sm" onClick={handleDelete} disabled={state.loading} icon={Icons.trash("h-3.5 w-3.5")}>
              Delete
            </AdminButton>
          )}
          <AdminButton type="submit" disabled={state.loading} isLoading={state.loading} className="ml-auto">
            {state.loading ? "Saving..." : isEdit ? "Update" : "Create"}
          </AdminButton>
        </div>
      </form>
    </GlassModal>
  );
}
