import { useCallback, useEffect, useRef, useState } from "react";
import type { FormEvent } from "react";
import {
  Badge,
  Button,
  Dialog,
  DialogTitle,
  Input,
  Textarea,
} from "@noorddev/vlak-react";

const STORAGE_KEY = "planning-room-v2";
const CAPACITY = 16;
const STATES = ["This week", "Waiting", "Later", "Done"] as const;
const FILTERS = ["All", ...STATES] as const;

type TaskState = (typeof STATES)[number];
type Filter = (typeof FILTERS)[number];

type Task = {
  id: string;
  title: string;
  project: string;
  owner: string;
  hours: number;
  due: string | null;
  state: TaskState;
  blocker: string;
  nextAction: string;
};

type Draft = Pick<Task, "id" | "state" | "nextAction">;

const INITIAL_TASKS: readonly Task[] = [
  {
    id: "p01",
    title: "Review the annotation flow",
    project: "Noord",
    owner: "Sam",
    hours: 4,
    due: "2026-09-15",
    state: "This week",
    blocker: "",
    nextAction: "Check keyboard use in the review dialog.",
  },
  {
    id: "p02",
    title: "Write the brand guide",
    project: "Polder",
    owner: "Alex",
    hours: 6,
    due: "2026-09-17",
    state: "This week",
    blocker: "",
    nextAction: "Draft the color and typography sections.",
  },
  {
    id: "p03",
    title: "Prepare the partner review",
    project: "Studio",
    owner: "Rae",
    hours: 3,
    due: "2026-09-16",
    state: "This week",
    blocker: "",
    nextAction: "Choose two directions and write the review questions.",
  },
  {
    id: "p04",
    title: "Fix the empty state on small screens",
    project: "Vlak",
    owner: "Sam",
    hours: 5,
    due: "2026-09-18",
    state: "This week",
    blocker: "",
    nextAction: "Reproduce the overflow at 390px.",
  },
  {
    id: "p05",
    title: "Export the campaign images",
    project: "Polder",
    owner: "Alex",
    hours: 2,
    due: "2026-09-16",
    state: "Waiting",
    blocker: "Waiting for approved copy.",
    nextAction: "Ask for the final headline.",
  },
  {
    id: "p06",
    title: "Check payment confirmation copy",
    project: "Studio",
    owner: "Rae",
    hours: 3,
    due: "2026-09-18",
    state: "Waiting",
    blocker: "Waiting for the finance review.",
    nextAction: "Confirm which receipt details are required.",
  },
  {
    id: "p07",
    title: "Document how the long project title behaves in the navigation",
    project: "Vlak",
    owner: "Sam",
    hours: 2,
    due: null,
    state: "Later",
    blocker: "",
    nextAction: "Capture the narrow and wide examples.",
  },
  {
    id: "p08",
    title: "Explore a new photo sequence",
    project: "Noord",
    owner: "Alex",
    hours: 4,
    due: null,
    state: "Later",
    blocker: "",
    nextAction: "Choose six photographs to compare.",
  },
  {
    id: "p09",
    title: "Send the workshop notes",
    project: "Studio",
    owner: "Rae",
    hours: 1,
    due: "2026-09-14",
    state: "Done",
    blocker: "",
    nextAction: "Notes sent for participant correction.",
  },
  {
    id: "p10",
    title: "Check the font licenses",
    project: "Polder",
    owner: "Alex",
    hours: 2,
    due: "2026-09-14",
    state: "Done",
    blocker: "",
    nextAction: "License links saved with the source files.",
  },
];

function isRecord(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null && !Array.isArray(value);
}

function isTaskState(value: unknown): value is TaskState {
  return STATES.some((state) => state === value);
}

function restoreTasks(): Task[] {
  const defaults = INITIAL_TASKS.map((task) => ({ ...task }));
  if (typeof window === "undefined") return defaults;

  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (!raw) return defaults;

    const stored: unknown = JSON.parse(raw);
    if (!isRecord(stored)) return defaults;

    return defaults.map((task) => {
      if (!Object.prototype.hasOwnProperty.call(stored, task.id)) return task;

      const entry = stored[task.id];
      if (
        !isRecord(entry) ||
        !isTaskState(entry.state) ||
        typeof entry.nextAction !== "string" ||
        !entry.nextAction.trim() ||
        (task.blocker !== "" && entry.state === "This week")
      ) {
        return task;
      }

      return {
        ...task,
        state: entry.state,
        nextAction: entry.nextAction.trim(),
      };
    });
  } catch {
    return defaults;
  }
}

function persistTasks(tasks: Task[]): boolean {
  try {
    const stored: Record<string, Pick<Task, "state" | "nextAction">> = {};
    for (const task of tasks) {
      stored[task.id] = {
        state: task.state,
        nextAction: task.nextAction,
      };
    }
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
    return true;
  } catch {
    return false;
  }
}

function plannedTotal(tasks: Task[]): number {
  return tasks.reduce(
    (total, task) => total + (task.state === "This week" ? task.hours : 0),
    0,
  );
}

function hoursLabel(hours: number): string {
  return `${hours} ${hours === 1 ? "hour" : "hours"}`;
}

function balanceLabel(planned: number): string {
  return planned > CAPACITY
    ? `${hoursLabel(planned - CAPACITY)} over capacity`
    : `${hoursLabel(CAPACITY - planned)} remaining`;
}

const dueFormatter = new Intl.DateTimeFormat("en-US", {
  month: "short",
  day: "numeric",
  timeZone: "UTC",
});

function DueDate({ due }: { due: string | null }) {
  return due ? (
    <time dateTime={due}>
      {dueFormatter.format(new Date(`${due}T12:00:00Z`))}
    </time>
  ) : (
    <span className="muted">No due date</span>
  );
}

function TaskBadge({ state }: { state: TaskState }) {
  return (
    <Badge
      variant={
        state === "This week"
          ? "solid"
          : state === "Later"
            ? "muted"
            : "outline"
      }
    >
      {state === "Done" && <span aria-hidden="true">✓ </span>}
      {state}
    </Badge>
  );
}

export default function App() {
  const [tasks, setTasks] = useState<Task[]>(restoreTasks);
  const [query, setQuery] = useState("");
  const [activeFilter, setActiveFilter] = useState<Filter>("All");
  const [draft, setDraft] = useState<Draft | null>(null);
  const [attemptedSave, setAttemptedSave] = useState(false);
  const [saveMessage, setSaveMessage] = useState("");
  const [storageUnavailable, setStorageUnavailable] = useState(false);

  const openerRef = useRef<HTMLButtonElement | null>(null);
  const filterGroupRef = useRef<HTMLDivElement | null>(null);
  const formRef = useRef<HTMLFormElement | null>(null);
  const stateSelectRef = useRef<HTMLSelectElement | null>(null);
  const returnFocusPending = useRef(false);

  const planned = plannedTotal(tasks);
  const excess = Math.max(0, planned - CAPACITY);
  const remaining = Math.max(0, CAPACITY - planned);

  const counts: Record<Filter, number> = {
    All: tasks.length,
    "This week": 0,
    Waiting: 0,
    Later: 0,
    Done: 0,
  };
  for (const task of tasks) counts[task.state] += 1;

  const search = query.trim().toLowerCase();
  const visibleTasks = tasks.filter(
    (task) =>
      (activeFilter === "All" || task.state === activeFilter) &&
      [task.title, task.project, task.owner].some((value) =>
        value.toLowerCase().includes(search),
      ),
  );

  const editingTask = draft
    ? tasks.find((task) => task.id === draft.id)
    : undefined;

  const blockedSelection = Boolean(
    editingTask?.blocker && draft?.state === "This week",
  );
  const noteError = Boolean(
    draft && attemptedSave && !draft.nextAction.trim(),
  );

  const previewHours =
    draft && editingTask
      ? planned -
        (editingTask.state === "This week" ? editingTask.hours : 0) +
        (draft.state === "This week" ? editingTask.hours : 0)
      : planned;

  const closeEditor = useCallback(() => {
    returnFocusPending.current = true;
    setDraft(null);
    setAttemptedSave(false);
    setSaveMessage("");
  }, []);

  useEffect(() => {
    if (draft !== null || !returnFocusPending.current) return;

    returnFocusPending.current = false;
    const opener = openerRef.current;
    const target =
      opener?.isConnected && opener.getClientRects().length > 0
        ? opener
        : filterGroupRef.current?.querySelector<HTMLButtonElement>(
            'button[aria-pressed="true"]',
          );

    target?.focus({ preventScroll: true });
    openerRef.current = null;
  }, [draft]);

  function openEditor(task: Task, opener: HTMLButtonElement) {
    openerRef.current = opener;
    returnFocusPending.current = false;
    setAttemptedSave(false);
    setSaveMessage("");
    setDraft({
      id: task.id,
      state: task.state,
      nextAction: task.nextAction,
    });
  }

  function clearFilters() {
    setQuery("");
    setActiveFilter("All");
    filterGroupRef.current
      ?.querySelector<HTMLButtonElement>('button[aria-label="All"]')
      ?.focus();
  }

  function saveTask(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!draft || !editingTask) return;

    setAttemptedSave(true);
    setSaveMessage("");

    if (editingTask.blocker && draft.state === "This week") {
      stateSelectRef.current?.focus();
      return;
    }

    const nextAction = draft.nextAction.trim();
    if (!nextAction) {
      formRef.current?.querySelector<HTMLTextAreaElement>("textarea")?.focus();
      return;
    }

    const updatedTasks = tasks.map((task) =>
      task.id === draft.id
        ? { ...task, state: draft.state, nextAction }
        : task,
    );

    const persisted = persistTasks(updatedTasks);
    setTasks(updatedTasks);
    setDraft({ ...draft, nextAction });
    setAttemptedSave(false);
    setStorageUnavailable(!persisted);
    setSaveMessage(
      persisted
        ? `Task saved. ${balanceLabel(plannedTotal(updatedTasks))}.`
        : "Task updated for this visit. Browser storage is unavailable, so changes will be lost on reload.",
    );
  }

  return (
    <>
      <a className="skip-link" href="#tasks">
        Skip to tasks
      </a>

      <main className="planning-room">
        <header className="page-header">
          <div className="review-line">
            <p className="review-label">
              <span className="room-mark" aria-hidden="true">
                <span />
                <span />
                <span />
                <span />
              </span>
              Weekly review
            </p>
            <p className="review-dates">September 14–18, 2026</p>
          </div>
          <h1>Planning room</h1>
          <p className="page-description">
            Make a manageable plan and keep the next step clear.
          </p>
        </header>

        <section
          className="capacity-card"
          aria-labelledby="capacity-heading"
          data-over={excess > 0}
        >
          <div>
            <h2 id="capacity-heading">Weekly capacity</h2>
            <dl className="capacity-metrics">
              <div>
                <dt>Planned</dt>
                <dd>
                  <strong>{planned}</strong>
                  <span>hours</span>
                </dd>
              </div>
              <div>
                <dt>Capacity</dt>
                <dd>
                  <strong>{CAPACITY}</strong>
                  <span>hours</span>
                </dd>
              </div>
              <div>
                <dt>{excess > 0 ? "Over capacity" : "Remaining"}</dt>
                <dd>
                  <strong>{excess > 0 ? excess : remaining}</strong>
                  <span>hours</span>
                </dd>
              </div>
            </dl>
          </div>

          <div className="capacity-insight">
            <h3>
              {excess > 0 && (
                <span className="warning-symbol" aria-hidden="true">
                  !
                </span>
              )}
              {balanceLabel(planned)}
            </h3>
            <p>
              {excess > 0
                ? `Move at least ${hoursLabel(excess)} from This week to Later to make the plan fit.`
                : remaining === 0
                  ? "All 16 hours are planned. Adding more will put the week over capacity."
                  : `You have room for ${hoursLabel(remaining)} of focused work.`}
            </p>
            <div className="capacity-visual" aria-hidden="true">
              <div className="capacity-marks">
                {Array.from({ length: CAPACITY }, (_, index) => (
                  <span
                    key={index}
                    className={index < planned ? "filled" : undefined}
                  />
                ))}
              </div>
              {excess > 0 && <Badge variant="outline">+{excess} h</Badge>}
            </div>
          </div>

          <p className="capacity-footnote">
            <strong>
              {counts["This week"]}{" "}
              {counts["This week"] === 1 ? "task" : "tasks"} planned.
            </strong>{" "}
            Only This week uses capacity. Waiting, Later, and Done are excluded.
          </p>
        </section>

        <section
          id="tasks"
          className="tasks-section"
          aria-labelledby="tasks-heading"
          tabIndex={-1}
        >
          <div className="tasks-heading-row">
            <div>
              <h2 id="tasks-heading">Tasks</h2>
              <p className="muted">The full picture, with the next step in view.</p>
            </div>
            <div className="search-field">
              <Input
                type="search"
                label="Search tasks"
                aria-label="Search tasks"
                placeholder="Title, project, or owner"
                value={query}
                onChange={(event) => setQuery(event.currentTarget.value)}
              />
            </div>
          </div>

          <div className="filter-bar">
            <div
              className="filter-group"
              ref={filterGroupRef}
              role="group"
              aria-label="Filter tasks by state"
            >
              {FILTERS.map((filter) => (
                <Button
                  key={filter}
                  type="button"
                  className="filter-button"
                  variant={activeFilter === filter ? "primary" : "ghost"}
                  aria-label={filter}
                  aria-pressed={activeFilter === filter}
                  onClick={() => setActiveFilter(filter)}
                >
                  {filter}
                  <span className="filter-count" aria-hidden="true">
                    {counts[filter]}
                  </span>
                </Button>
              ))}
            </div>
            <p className="result-count" role="status" aria-atomic="true">
              {visibleTasks.length} of {tasks.length} shown
            </p>
          </div>

          {visibleTasks.length === 0 ? (
            <div className="empty-state">
              <h3>No matching tasks</h3>
              <p>Try another search or return to the full list.</p>
              <Button type="button" onClick={clearFilters}>
                Clear filters
              </Button>
            </div>
          ) : (
            <ul className="task-list">
              {visibleTasks.map((task) => (
                <li key={task.id}>
                  <article
                    className="task-row"
                    aria-labelledby={`${task.id}-title`}
                  >
                    <div className="task-main">
                      <p className="task-project">
                        <span className="sr-only">Project: </span>
                        {task.project}
                      </p>
                      <h3 id={`${task.id}-title`}>{task.title}</h3>
                      <p className="task-next">
                        <span className="next-label">Next action</span>
                        {task.nextAction}
                      </p>
                      {task.blocker && (
                        <p className="task-blocker">
                          <span className="blocker-symbol" aria-hidden="true">
                            !
                          </span>
                          <span>
                            <strong>Blocked:</strong> {task.blocker}
                          </span>
                        </p>
                      )}
                    </div>

                    <dl className="task-facts">
                      <div>
                        <dt>Owner</dt>
                        <dd>{task.owner}</dd>
                      </div>
                      <div>
                        <dt>Estimate</dt>
                        <dd>{hoursLabel(task.hours)}</dd>
                      </div>
                      <div>
                        <dt>Due date</dt>
                        <dd>
                          <DueDate due={task.due} />
                        </dd>
                      </div>
                    </dl>

                    <div className="task-state">
                      <span className="fact-label">State</span>
                      <TaskBadge state={task.state} />
                    </div>

                    <Button
                      type="button"
                      variant="ghost"
                      className="edit-task"
                      aria-label={`Edit ${task.title}`}
                      onClick={(event) => openEditor(task, event.currentTarget)}
                    >
                      Edit
                    </Button>
                  </article>
                </li>
              ))}
            </ul>
          )}
        </section>

        <footer className="page-footer">
          {storageUnavailable
            ? "Browser storage is unavailable. Changes are kept for this visit."
            : "Saved states and next actions stay in this browser."}
        </footer>
      </main>

      {draft && editingTask && (
        <Dialog
          open
          onClose={closeEditor}
          dismissable
          lightDismiss={false}
          closeLabel="Close task editor"
          className="task-dialog"
          aria-describedby="editor-description"
        >
          <div className="editor-heading">
            <p className="eyebrow">Task details</p>
            <DialogTitle as="h2" className="editor-title">
              {editingTask.title}
            </DialogTitle>
            <p id="editor-description" className="muted">
              Choose a state and a clear next action. Save to apply your changes.
            </p>
          </div>

          <dl className="editor-facts">
            <div>
              <dt>Project</dt>
              <dd>{editingTask.project}</dd>
            </div>
            <div>
              <dt>Owner</dt>
              <dd>{editingTask.owner}</dd>
            </div>
            <div>
              <dt>Estimate</dt>
              <dd>{hoursLabel(editingTask.hours)}</dd>
            </div>
            <div>
              <dt>Due date</dt>
              <dd>
                <DueDate due={editingTask.due} />
              </dd>
            </div>
          </dl>

          <section
            className="blocker-note"
            data-blocked={Boolean(editingTask.blocker)}
            aria-labelledby="blocker-heading"
          >
            <h3 id="blocker-heading">Blocker</h3>
            <p>
              {editingTask.blocker ||
                "No blocker. This task is available to plan."}
            </p>
            {editingTask.blocker && (
              <p className="field-hint">
                This task cannot move to This week while blocked.
              </p>
            )}
          </section>

          <form ref={formRef} onSubmit={saveTask} noValidate>
            <div className="editor-field">
              <label htmlFor="task-state">Task state</label>
              <select
                id="task-state"
                ref={stateSelectRef}
                value={draft.state}
                autoFocus
                aria-invalid={blockedSelection}
                aria-describedby={
                  blockedSelection ? "state-hint state-error" : "state-hint"
                }
                onChange={(event) => {
                  const value = event.currentTarget.value;
                  if (isTaskState(value)) {
                    setDraft((current) =>
                      current ? { ...current, state: value } : current,
                    );
                    setSaveMessage("");
                  }
                }}
              >
                {STATES.map((state) => (
                  <option key={state} value={state}>
                    {state}
                  </option>
                ))}
              </select>
              <p id="state-hint" className="field-hint">
                Only This week counts toward the 16-hour plan.
              </p>
              {blockedSelection && (
                <p id="state-error" className="field-error" role="alert">
                  This task is blocked and cannot be saved to This week. Choose
                  Waiting, Later, or Done. The saved state is unchanged.
                </p>
              )}
            </div>

            <div className="editor-field">
              <Textarea
                id="next-action"
                label="Next action"
                aria-label="Next action"
                required
                rows={4}
                value={draft.nextAction}
                aria-invalid={noteError}
                aria-describedby={
                  noteError
                    ? "next-action-hint next-action-error"
                    : "next-action-hint"
                }
                feedback={
                  noteError ? (
                    <span id="next-action-error" role="alert">
                      Enter a next action before saving. Spaces alone do not
                      count.
                    </span>
                  ) : undefined
                }
                onChange={(event) => {
                  const value = event.currentTarget.value;
                  setDraft((current) =>
                    current ? { ...current, nextAction: value } : current,
                  );
                  setSaveMessage("");
                }}
              />
              <p id="next-action-hint" className="field-hint">
                Required. Name the specific step that moves this task forward.
              </p>
            </div>

            {!blockedSelection && (
              <div className="plan-preview">
                <div className="preview-heading">
                  <span>Plan after saving</span>
                  <strong>{previewHours} of 16 hours</strong>
                </div>
                <p>
                  {balanceLabel(previewHours)}.
                  {previewHours > CAPACITY &&
                    " You can still save this task; capacity is a warning."}
                </p>
              </div>
            )}

            {saveMessage && (
              <p className="save-message" role="status" aria-atomic="true">
                {saveMessage}
              </p>
            )}

            <div className="editor-actions">
              <Button type="button" variant="ghost" onClick={closeEditor}>
                Cancel
              </Button>
              <Button type="submit" variant="primary">
                Save task
              </Button>
            </div>
          </form>
        </Dialog>
      )}
    </>
  );
}