/**
 * TodayTab — the "Today" surface for the Water Log admin.
 *
 * Combines the hero gauge + summary stats with the recent entries
 * table + filter bar. Holds the entry CRUD, CSV export, and
 * "Generate Report" trigger.
 */
"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import AdminButton from "@/components/admin/design-system/AdminButton";
import { WaterGauge, SeasonMark } from "@/components/water/icons";
import {
  getWaterEntries,
  type AdminEntry,
  type AdminHeadgate,
  type AdminIrrigator,
} from "@/actions/water-log/admin";
import {
  downloadWaterLogCSV,
  filterWaterLogEntries,
  shapeWaterLogEntry,
  type IrrigationSeasonSettings,
  type WaterLogReportRow,
} from "@/lib/water-log-reporting";
import { formatDateTime } from "@/lib/format-date";
import {
  DayInput,
  EmptyState,
  FilterChip,
  MonthSelect,
  SectionHeader,
  StatTile,
} from "../shared/Primitives";
import { DownloadIcon, ReportIcon, TableIcon } from "../shared/icons";
import type { Action, NotifyFn, State } from "../types";

export type TodayTabProps = {
  brandId: string;
  state: State;
  todayLabel: string;
  todayEntries: AdminEntry[];
  todayTotal: number;
  inSeason: boolean;
  notify: NotifyFn;
  dispatch: React.Dispatch<Action>;
  onPreviewReport: () => void;
  onSeasonChange: (s: IrrigationSeasonSettings) => void;
  onRecipientNameChange: (v: string) => void;
};

export function TodayTab({
  brandId,
  state,
  todayLabel,
  todayEntries,
  todayTotal,
  inSeason,
  notify,
  dispatch,
  onPreviewReport,
  onSeasonChange,
  onRecipientNameChange,
}: TodayTabProps) {
  const router = useRouter();

  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 = {
        dateFrom: state.filters.dateFrom || undefined,
        dateTo: state.filters.dateTo || undefined,
        headgateId: state.filters.headgate || undefined,
        userId: state.filters.user || undefined,
        submittedVia: state.filters.via || undefined,
      };
      const filtered = filterWaterLogEntries(shaped, exportFilters);
      downloadWaterLogCSV(`water-log-${state.today}.csv`, filtered);
      notify(`Exported ${filtered.length} entries`);
    } finally {
      dispatch({ type: "SET_CSV_LOADING", value: false });
    }
  }

  return (
    <>
      <TodaySummary
        todayLabel={todayLabel}
        todayEntries={todayEntries}
        todayTotal={todayTotal}
        headgates={state.headgates}
        users={state.users}
        inSeason={inSeason}
        seasonStart={state.seasonStart}
        recipientName={state.recipientName}
        onToggleReportSettings={() => dispatch({ type: "TOGGLE_REPORT_SETTINGS" })}
        onSeasonChange={onSeasonChange}
        onRecipientNameChange={onRecipientNameChange}
        onPreviewReport={onPreviewReport}
        showReportSettings={state.showReportSettings}
      />

      <RecentEntriesSection
        state={state}
        dispatch={dispatch}
        onEditEntry={(e) => router.push(`/admin/water-log/entries/${e.id}`)}
        onExportCSV={handleExportCSV}
      />
    </>
  );
}

// ── TodaySummary (hero gauge + stats + report settings toggle) ──────────────
function TodaySummary({
  todayLabel,
  todayEntries,
  todayTotal,
  headgates,
  users,
  inSeason,
  showReportSettings,
  seasonStart,
  recipientName,
  onToggleReportSettings,
  onSeasonChange,
  onRecipientNameChange,
  onPreviewReport,
}: {
  todayLabel: string;
  todayEntries: AdminEntry[];
  todayTotal: number;
  headgates: AdminHeadgate[];
  users: AdminIrrigator[];
  inSeason: boolean;
  showReportSettings: boolean;
  seasonStart: IrrigationSeasonSettings;
  recipientName: string;
  onToggleReportSettings: () => void;
  onSeasonChange: (s: IrrigationSeasonSettings) => void;
  onRecipientNameChange: (v: string) => void;
  onPreviewReport: () => void;
}) {
  return (
    <section className="relative overflow-hidden rounded-2xl border border-[#d4d9d3] bg-[#fdfaf2] shadow-[0_1px_0_rgba(0,0,0,0.04)]">
      <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 flex-wrap 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={onPreviewReport}
            >
              Preview Report
            </AdminButton>
            <AdminButton
              variant={showReportSettings ? "primary" : "secondary"}
              size="sm"
              icon={
                <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>
              }
              onClick={onToggleReportSettings}
            >
              Report Settings
            </AdminButton>
          </div>

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

// ── Inline Report Settings (kept under the toggle button) ───────────────────
function ReportSettingsInline({
  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">
      <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">
        <ReportSeasonRow
          label="Season start"
          month={season.seasonStartMonth}
          day={season.seasonStartDay}
          onMonthChange={(m) =>
            onSeasonChange({ ...season, seasonStartMonth: m })
          }
          onDayChange={(d) => onSeasonChange({ ...season, seasonStartDay: d })}
        />
        <ReportSeasonRow
          label="Season end"
          month={season.seasonEndMonth}
          day={season.seasonEndDay}
          onMonthChange={(m) =>
            onSeasonChange({ ...season, seasonEndMonth: m })
          }
          onDayChange={(d) => onSeasonChange({ ...season, seasonEndDay: d })}
        />
        <div className="sm:col-span-2">
          <label className="block">
            <span className="mb-1 block font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
              Recipient name (used in report salutation)
            </span>
            <input
              type="text"
              value={recipientName}
              onChange={(e) => onRecipientNameChange(e.target.value)}
              placeholder="David"
              aria-label="Recipient name"
              className="w-full rounded-lg border border-[#d4d9d3] px-3 py-2 text-sm outline-none focus:border-[#1a4d2e]"
            />
          </label>
        </div>
      </div>
    </div>
  );
}

function ReportSeasonRow({
  label,
  month,
  day,
  onMonthChange,
  onDayChange,
}: {
  label: string;
  month: number;
  day: number;
  onMonthChange: (m: number) => void;
  onDayChange: (d: number) => void;
}) {
  return (
    <div>
      <span className="mb-1 block font-mono text-[10px] uppercase tracking-wider text-[#57694e]">
        {label}
      </span>
      <div className="flex gap-1">
        <MonthSelect value={month} onChange={onMonthChange} />
        <DayInput value={day} onChange={onDayChange} />
      </div>
    </div>
  );
}

// ── RecentEntriesSection (table + filters) ──────────────────────────────────
function RecentEntriesSection({
  state,
  dispatch,
  onEditEntry,
  onExportCSV,
}: {
  state: State;
  dispatch: React.Dispatch<Action>;
  onEditEntry: (e: AdminEntry) => void;
  onExportCSV: () => void;
}) {
  const filteredEntries = 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;
  });

  return (
    <>
      <SectionHeader
        index="§ 03"
        title="Recent Entries"
        subtitle="The latest readings logged from the field or the admin panel. Use the filters to narrow, then export to CSV."
        action={
          <AdminButton
            size="sm"
            onClick={onExportCSV}
            isLoading={state.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={state.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={state.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={state.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>
            {state.headgates.map((h) => (
              <option key={h.id} value={h.id}>
                {h.name}
              </option>
            ))}
          </select>
        </FilterChip>
        <FilterChip label="User">
          <select
            value={state.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>
            {state.users.map((u) => (
              <option key={u.id} value={u.id}>
                {u.name}
              </option>
            ))}
          </select>
        </FilterChip>
        <FilterChip label="Via">
          <select
            value={state.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>
        {(state.filters.dateFrom ||
          state.filters.dateTo ||
          state.filters.headgate ||
          state.filters.user ||
          state.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 {state.entries.length} entries
        </span>
      </div>

      {filteredEntries.length === 0 ? (
        <EmptyState
          icon={<TableIcon />}
          title="No entries match"
          body={
            state.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>
      )}
    </>
  );
}