"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Tooltip } from "@/components/ui/tooltip";
import { useLocalStorage } from "@/lib/hooks/use-local-storage";
import {
  CEO_DUTIES,
  CADENCE_LABEL,
  CADENCE_ICON,
  CATEGORY_LABEL,
  CATEGORY_COLOR,
  isDue,
  daysSince,
  type Cadence,
  type Duty,
  type DutyCategory,
} from "@/lib/sag/ceo-duties";

interface DutyStatus {
  lastCompletedIso?: string;
  notes?: string;
  skipped?: boolean;
}

const CADENCES: Cadence[] = ["daily", "weekly", "monthly", "quarterly", "annual", "ongoing"];

export function CeoDuties() {
  const [statuses, setStatuses] = useLocalStorage<Record<string, DutyStatus>>("sag.duties.status", {});
  const [filterCategory, setFilterCategory] = useState<DutyCategory | "all">("all");
  const [showCompleted, setShowCompleted] = useState(true);

  const enriched = useMemo(
    () =>
      CEO_DUTIES.map((d) => {
        const s = statuses[d.id] ?? {};
        const due = isDue(d.cadence, s.lastCompletedIso);
        const age = daysSince(s.lastCompletedIso);
        return { duty: d, status: s, due, age };
      }),
    [statuses]
  );

  const filtered = enriched.filter((e) => {
    if (filterCategory !== "all" && e.duty.category !== filterCategory) return false;
    if (!showCompleted && !e.due) return false;
    return true;
  });

  // Aggregate stats
  const dueCount = enriched.filter((e) => e.due).length;
  const doneCount = enriched.filter((e) => !e.due).length;
  const totalMinutes = filtered.filter((e) => e.due).reduce((a, e) => a + e.duty.estMinutes, 0);

  function markDone(id: string) {
    setStatuses({
      ...statuses,
      [id]: { ...statuses[id], lastCompletedIso: new Date().toISOString() },
    });
  }

  function markUndone(id: string) {
    const next = { ...statuses };
    if (next[id]) {
      delete next[id].lastCompletedIso;
      if (!next[id].notes && !next[id].skipped) delete next[id];
    }
    setStatuses(next);
  }

  function setNotes(id: string, notes: string) {
    setStatuses({ ...statuses, [id]: { ...statuses[id], notes } });
  }

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-4">
        <Stat label="Total duties" value={String(CEO_DUTIES.length)} />
        <Stat label="Due now" value={String(dueCount)} tone={dueCount > 0 ? "warning" : "default"} />
        <Stat label="Up to date" value={String(doneCount)} tone="success" />
        <Stat label="Time to clear" value={`~${Math.round(totalMinutes / 60)}h`} hint="estimated focus time" />
      </div>

      <Card>
        <CardContent className="p-4 flex flex-wrap items-center gap-3">
          <select
            value={filterCategory}
            onChange={(e) => setFilterCategory(e.target.value as DutyCategory | "all")}
            className="h-10 rounded-md border border-input bg-background px-3 text-sm"
          >
            <option value="all">All categories</option>
            {Object.entries(CATEGORY_LABEL).map(([k, v]) => (
              <option key={k} value={k}>{v}</option>
            ))}
          </select>
          <label className="inline-flex items-center gap-2 text-sm cursor-pointer">
            <Switch
              checked={showCompleted}
              onCheckedChange={setShowCompleted}
              aria-label="Show completed"
            />
            Show completed
          </label>
          <span className="text-xs text-muted-foreground ml-auto">
            {filtered.length} of {CEO_DUTIES.length}
          </span>
        </CardContent>
      </Card>

      {CADENCES.map((cadence) => {
        const items = filtered.filter((e) => e.duty.cadence === cadence);
        if (items.length === 0) return null;
        const itemsDue = items.filter((e) => e.due).length;
        return (
          <section key={cadence}>
            <div className="flex items-center justify-between mb-3">
              <h2 className="text-lg font-semibold tracking-tight flex items-center gap-2">
                <span>{CADENCE_ICON[cadence]}</span>
                <span>{CADENCE_LABEL[cadence]}</span>
                <Badge variant="outline" className="text-[10px]">{items.length}</Badge>
              </h2>
              {cadence !== "ongoing" && (
                <span className="text-xs text-muted-foreground">
                  {itemsDue} due · {items.length - itemsDue} on track
                </span>
              )}
            </div>
            <div className="space-y-2">
              {items.map((e) => (
                <DutyRow
                  key={e.duty.id}
                  duty={e.duty}
                  status={e.status}
                  due={e.due}
                  age={e.age}
                  onDone={() => markDone(e.duty.id)}
                  onUndone={() => markUndone(e.duty.id)}
                  onNotes={(n) => setNotes(e.duty.id, n)}
                />
              ))}
            </div>
          </section>
        );
      })}

      <p className="text-xs text-muted-foreground">
        Completion timestamps saved to <code className="text-[10px]">sag.duties.status</code> in localStorage.
        “Due” status auto-derives from cadence + last-completed date. Ongoing projects don’t expire — track them via notes.
      </p>
    </div>
  );
}

function DutyRow({
  duty,
  status,
  due,
  age,
  onDone,
  onUndone,
  onNotes,
}: {
  duty: Duty;
  status: DutyStatus;
  due: boolean;
  age: number | null;
  onDone: () => void;
  onUndone: () => void;
  onNotes: (n: string) => void;
}) {
  const [showNotes, setShowNotes] = useState(false);
  const categoryColor = CATEGORY_COLOR[duty.category];

  return (
    <Card className={due ? "" : "bg-muted/30 border-muted"}>
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <div className="pt-0.5">
            {due ? (
              <Tooltip content="Mark done">
                <button
                  onClick={onDone}
                  className="w-5 h-5 rounded border-2 border-input hover:border-foreground transition-colors"
                  aria-label="Mark done"
                />
              </Tooltip>
            ) : (
              <Tooltip content="Mark undone">
                <button
                  onClick={onUndone}
                  className="w-5 h-5 rounded bg-green-600 text-white text-xs flex items-center justify-center hover:bg-green-700 transition-colors"
                  aria-label="Mark undone"
                >
                  ✓
                </button>
              </Tooltip>
            )}
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <span className={`inline-block w-2 h-2 rounded-full ${categoryColor}`} />
              <span className={`text-sm font-medium ${!due ? "line-through text-muted-foreground" : ""}`}>
                {duty.title}
              </span>
              <Badge variant="outline" className="text-[10px]">{CATEGORY_LABEL[duty.category]}</Badge>
              <span className="text-[10px] text-muted-foreground">{duty.estMinutes}m</span>
              {duty.whenLabel && (
                <span className="text-[10px] text-muted-foreground">· {duty.whenLabel}</span>
              )}
            </div>
            <p className="mt-1 text-xs text-muted-foreground leading-relaxed">{duty.description}</p>
            {age != null && (
              <p className="mt-1 text-[10px] text-muted-foreground">
                {due
                  ? age === 0
                    ? "Done today, but cadence has reset"
                    : `Last done ${age}d ago`
                  : age === 0
                  ? "Done today"
                  : `Done ${age}d ago — on track`}
              </p>
            )}
            {status.notes && !showNotes && (
              <p className="mt-2 text-xs italic bg-muted rounded-md px-2 py-1.5">
                <span className="text-muted-foreground">Note:</span> {status.notes}
              </p>
            )}
            {showNotes && (
              <textarea
                defaultValue={status.notes ?? ""}
                onBlur={(e) => {
                  onNotes(e.target.value);
                  setShowNotes(false);
                }}
                placeholder="Add a personal note for this duty..."
                className="mt-2 w-full text-xs rounded-md border border-input bg-background p-2"
                rows={2}
                autoFocus
              />
            )}
          </div>
          <div className="flex items-center gap-1 shrink-0">
            {duty.href && (
              <Button asChild variant="ghost" size="sm">
                <Link href={duty.href}>Open →</Link>
              </Button>
            )}
            <Button variant="ghost" size="sm" onClick={() => setShowNotes((v) => !v)}>
              {status.notes ? "Edit note" : "+ Note"}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function Stat({ label, value, hint, tone = "default" }: { label: string; value: string; hint?: string; tone?: "default" | "success" | "warning" }) {
  const color =
    tone === "success" ? "text-green-700 dark:text-green-400" : tone === "warning" ? "text-yellow-700 dark:text-yellow-400" : "text-foreground";
  return (
    <Card>
      <CardContent className="p-5">
        <div className="text-xs uppercase tracking-wider text-muted-foreground">{label}</div>
        <div className={`mt-1 text-2xl font-semibold tabular-nums ${color}`}>{value}</div>
        {hint && <div className="mt-0.5 text-xs text-muted-foreground">{hint}</div>}
      </CardContent>
    </Card>
  );
}