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

const STORAGE_KEY = 'planning-room-v2';
const CAPACITY_HOURS = 16;
const WEEK_START = '2026-09-14';
const WEEK_END = '2026-09-18';
const WEEK_LABEL = 'September 14–18, 2026';

const STATES = ['This week', 'Waiting', 'Later', 'Done'] as const;
type TaskState = (typeof STATES)[number];
type Filter = 'All' | TaskState;
const FILTERS: readonly Filter[] = ['All', ...STATES];

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

type Draft = {
  id: string;
  state: TaskState;
  nextAction: string;
};

type Plan = {
  planned: number;
  excess: number;
  remaining: number;
  verdict: string;
  hint: string;
};

const SEED: 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 isTaskState(value: unknown): value is TaskState {
  return typeof value === 'string' && (STATES as readonly string[]).includes(value);
}

function toKey(value: string): string {
  return value.toLowerCase().replace(/\s+/g, '-');
}

function formatHours(hours: number): string {
  return `${hours} h`;
}

function countTasks(count: number): string {
  return `${count} ${count === 1 ? 'task' : 'tasks'}`;
}

function formatDue(due: string | null): string {
  if (!due) return 'No due date';
  const [year, month, day] = due.split('-').map(Number);
  if (!year || !month || !day) return due;
  return new Date(year, month - 1, day).toLocaleDateString('en-US', {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
  });
}

function isDueThisWeek(task: Task): boolean {
  return task.due !== null && task.due >= WEEK_START && task.due <= WEEK_END;
}

function sumHours(tasks: readonly Task[]): number {
  return tasks.reduce((total, task) => total + task.hours, 0);
}

function summarize(tasks: readonly Task[]): Plan {
  const planned = sumHours(tasks.filter((task) => task.state === 'This week'));
  const excess = Math.max(planned - CAPACITY_HOURS, 0);
  const remaining = Math.max(CAPACITY_HOURS - planned, 0);
  if (excess > 0) {
    return {
      planned,
      excess,
      remaining,
      verdict: `${formatHours(excess)} over capacity`,
      hint: 'Move work to Later or Waiting to fit, or accept the overrun.',
    };
  }
  if (remaining === 0) {
    return {
      planned,
      excess,
      remaining,
      verdict: 'At capacity',
      hint: 'Every focused hour is spoken for.',
    };
  }
  return {
    planned,
    excess,
    remaining,
    verdict: `${formatHours(remaining)} left`,
    hint: 'There is room to plan more work this week.',
  };
}

function stateVariant(state: TaskState): 'solid' | 'outline' | 'muted' {
  if (state === 'This week') return 'solid';
  if (state === 'Waiting') return 'outline';
  return 'muted';
}

function focusById(id: string): boolean {
  const element = document.getElementById(id);
  if (element instanceof HTMLElement) {
    element.focus();
    return true;
  }
  return false;
}

function loadTasks(): Task[] {
  const seed = SEED.map((task) => ({ ...task }));
  if (typeof window === 'undefined') return seed;
  let raw: string | null = null;
  try {
    raw = window.localStorage.getItem(STORAGE_KEY);
  } catch {
    return seed;
  }
  if (!raw) return seed;
  let parsed: unknown;
  try {
    parsed = JSON.parse(raw);
  } catch {
    return seed;
  }
  if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) return seed;
  const stored = parsed as Record<string, unknown>;
  return seed.map((task) => {
    const entry = stored[task.id];
    if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return task;
    const { state, nextAction } = entry as Record<string, unknown>;
    const restored = { ...task };
    if (isTaskState(state) && !(task.blocker && state === 'This week')) restored.state = state;
    if (typeof nextAction === 'string' && nextAction.trim()) restored.nextAction = nextAction.trim();
    return restored;
  });
}

function persistTasks(tasks: readonly Task[]): void {
  const record: Record<string, { state: TaskState; nextAction: string }> = {};
  for (const task of tasks) {
    record[task.id] = { state: task.state, nextAction: task.nextAction };
  }
  try {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(record));
  } catch {
    // Storage is unavailable or full. The plan still updates in memory.
  }
}

type TaskRowProps = {
  task: Task;
  onEdit: (task: Task) => void;
};

function TaskRow({ task, onEdit }: TaskRowProps) {
  const flagDue = isDueThisWeek(task) && task.state !== 'This week' && task.state !== 'Done';
  return (
    <li className={task.blocker ? 'pr-task is-blocked' : 'pr-task'}>
      <div className="pr-task-main">
        <h3 className="pr-task-title">{task.title}</h3>
        <p className="pr-task-meta">
          <Badge variant={stateVariant(task.state)}>{task.state}</Badge>
          <span>{task.project}</span>
          <span aria-hidden="true">·</span>
          <span>{task.owner}</span>
          <span aria-hidden="true">·</span>
          <span>{task.due ? `Due ${formatDue(task.due)}` : 'No due date'}</span>
          {flagDue && <Badge variant="outline">Due this week</Badge>}
        </p>
      </div>
      <div className="pr-task-next">
        <span className="pr-task-label">Next action</span>
        <p>{task.nextAction}</p>
        {task.blocker && <p className="pr-task-blocker">Blocked: {task.blocker}</p>}
      </div>
      <p className="pr-task-hours">{formatHours(task.hours)}</p>
      <div className="pr-task-actions">
        <Button
          id={`edit-${task.id}`}
          type="button"
          variant="ghost"
          className="pr-edit"
          aria-label={`Edit ${task.title}`}
          onClick={() => onEdit(task)}
        >
          Edit
        </Button>
      </div>
    </li>
  );
}

export default function App() {
  const [tasks, setTasks] = useState<Task[]>(loadTasks);
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState<Filter>('All');
  const [draft, setDraft] = useState<Draft | null>(null);
  const [attemptedSave, setAttemptedSave] = useState(false);
  const [savedMessage, setSavedMessage] = useState('');
  const returnFocusTo = useRef<string | null>(null);

  const plan = summarize(tasks);
  const scale = Math.max(plan.planned, CAPACITY_HOURS);
  const withinPercent = (Math.min(plan.planned, CAPACITY_HOURS) / scale) * 100;
  const overPercent = (plan.excess / scale) * 100;
  const capPercent = (CAPACITY_HOURS / scale) * 100;

  const needle = query.trim().toLowerCase();
  const searched = needle
    ? tasks.filter((task) =>
        [task.title, task.project, task.owner].some((value) => value.toLowerCase().includes(needle)),
      )
    : tasks;
  const counts: Record<Filter, number> = {
    All: searched.length,
    'This week': 0,
    Waiting: 0,
    Later: 0,
    Done: 0,
  };
  for (const task of searched) counts[task.state] += 1;
  const visible = filter === 'All' ? searched : searched.filter((task) => task.state === filter);
  const groups = STATES.map((state) => ({
    state,
    items: visible.filter((task) => task.state === state),
  })).filter((group) => group.items.length > 0);
  const resultsText =
    visible.length === tasks.length
      ? `Showing ${countTasks(tasks.length)}`
      : `Showing ${visible.length} of ${tasks.length} tasks`;

  const editingTask = draft ? (tasks.find((task) => task.id === draft.id) ?? null) : null;
  const blockedError =
    draft && editingTask && editingTask.blocker && draft.state === 'This week'
      ? `Blocked: ${editingTask.blocker} Blocked tasks can't be planned for this week. Choose Waiting, Later, or Done.`
      : '';
  const noteError =
    attemptedSave && draft && !draft.nextAction.trim() ? 'Add a next action before saving.' : '';

  let planPreview = '';
  if (draft && editingTask && !blockedError && draft.state !== editingTask.state) {
    const entering = draft.state === 'This week';
    const leaving = editingTask.state === 'This week';
    if (entering || leaving) {
      const preview = summarize(
        tasks.map((task) => (task.id === draft.id ? { ...task, state: draft.state } : task)),
      );
      planPreview = `${entering ? 'Adds' : 'Frees'} ${formatHours(editingTask.hours)}. Planned would be ${formatHours(preview.planned)} of ${formatHours(CAPACITY_HOURS)}, ${preview.verdict.toLowerCase()}.`;
    }
  }

  useEffect(() => {
    if (draft !== null) return;
    const openerId = returnFocusTo.current;
    if (openerId === null) return;
    returnFocusTo.current = null;
    if (!focusById(`edit-${openerId}`)) {
      focusById(`filter-${toKey(filter)}`);
    }
  }, [draft, filter]);

  function openEditor(task: Task) {
    returnFocusTo.current = task.id;
    setDraft({ id: task.id, state: task.state, nextAction: task.nextAction });
    setAttemptedSave(false);
    setSavedMessage('');
  }

  function closeEditor() {
    setDraft(null);
    setAttemptedSave(false);
    setSavedMessage('');
  }

  function clearFilters() {
    setQuery('');
    setFilter('All');
    focusById('pr-search');
  }

  function handleStateChange(event: ChangeEvent<HTMLSelectElement>) {
    const value = event.target.value;
    if (!isTaskState(value)) return;
    setDraft((current) => (current ? { ...current, state: value } : current));
    setSavedMessage('');
  }

  function handleNoteChange(event: ChangeEvent<HTMLTextAreaElement>) {
    const value = event.target.value;
    setDraft((current) => (current ? { ...current, nextAction: value } : current));
    setSavedMessage('');
  }

  function handleSave(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!draft || !editingTask) return;
    setAttemptedSave(true);
    setSavedMessage('');
    if (editingTask.blocker && draft.state === 'This week') {
      focusById('task-state');
      return;
    }
    const note = draft.nextAction.trim();
    if (!note) {
      focusById('task-next-action');
      return;
    }
    const nextTasks = tasks.map((task) =>
      task.id === draft.id ? { ...task, state: draft.state, nextAction: note } : task,
    );
    setTasks(nextTasks);
    persistTasks(nextTasks);
    setDraft({ ...draft, nextAction: note });
    setAttemptedSave(false);
    const next = summarize(nextTasks);
    setSavedMessage(
      `Saved. Planned ${formatHours(next.planned)} of ${formatHours(CAPACITY_HOURS)}, ${next.verdict.toLowerCase()}.`,
    );
  }

  function describeEmpty(): string {
    const term = query.trim();
    if (term && filter !== 'All') return `No tasks match “${term}” in ${filter}.`;
    if (term) return `No tasks match “${term}”.`;
    if (filter !== 'All') return `No tasks in ${filter}.`;
    return 'No tasks to show.';
  }

  return (
    <main className="pr-app">
      <header className="pr-header">
        <div>
          <h1>Planning room</h1>
          <p className="pr-week">Review week of {WEEK_LABEL}</p>
        </div>
        <p className="pr-capacity-note">{formatHours(CAPACITY_HOURS)} of focused time available</p>
      </header>

      <section className="pr-plan" aria-labelledby="pr-plan-heading">
        <div className="pr-plan-top">
          <h2 id="pr-plan-heading">Plan for this week</h2>
          <p className={plan.excess > 0 ? 'pr-verdict is-over' : 'pr-verdict is-ok'}>{plan.verdict}</p>
        </div>
        <p className="pr-plan-figure">
          <strong>{formatHours(plan.planned)}</strong>
          <span> planned of {formatHours(CAPACITY_HOURS)} capacity</span>
        </p>
        <div className="pr-meter" aria-hidden="true">
          <div className="pr-meter-fill" style={{ width: `${withinPercent}%` }} />
          {overPercent > 0 && (
            <div className="pr-meter-over" style={{ left: `${withinPercent}%`, width: `${overPercent}%` }} />
          )}
          <div className="pr-meter-cap" style={{ left: `${capPercent}%` }} />
        </div>
        <p className="pr-plan-hint">{plan.hint}</p>
        <dl className="pr-plan-stats">
          {STATES.map((state) => {
            const items = tasks.filter((task) => task.state === state);
            return (
              <div key={state} className="pr-stat">
                <dt>{state}</dt>
                <dd>
                  {countTasks(items.length)} · {formatHours(sumHours(items))}
                </dd>
              </div>
            );
          })}
        </dl>
      </section>

      <div className="pr-toolbar">
        <div className="pr-search" role="search">
          <Input
            id="pr-search"
            type="text"
            label="Search tasks"
            aria-label="Search tasks"
            placeholder="Title, project, or owner"
            autoComplete="off"
            value={query}
            onChange={(event: ChangeEvent<HTMLInputElement>) => setQuery(event.target.value)}
          />
        </div>
        <div className="pr-filters" role="group" aria-label="Filter by state">
          {FILTERS.map((item) => {
            const active = item === filter;
            return (
              <Button
                key={item}
                id={`filter-${toKey(item)}`}
                type="button"
                className="pr-filter"
                variant={active ? 'primary' : 'ghost'}
                aria-pressed={active}
                aria-label={item}
                onClick={() => setFilter(item)}
              >
                {item}
                <span className="pr-count" aria-hidden="true">
                  {counts[item]}
                </span>
              </Button>
            );
          })}
        </div>
      </div>

      <p className="pr-results" role="status">
        {resultsText}
      </p>

      {groups.length === 0 ? (
        <div className="pr-empty">
          <p className="pr-empty-text">{describeEmpty()}</p>
          <Button type="button" variant="primary" onClick={clearFilters}>
            Clear filters
          </Button>
        </div>
      ) : (
        groups.map((group) => (
          <section
            key={group.state}
            className="pr-group"
            aria-labelledby={`pr-group-${toKey(group.state)}`}
          >
            <div className="pr-group-head">
              <h2 id={`pr-group-${toKey(group.state)}`}>{group.state}</h2>
              <span className="pr-group-meta">
                {countTasks(group.items.length)} · {formatHours(sumHours(group.items))}
                {group.state === 'This week' ? ` of ${formatHours(CAPACITY_HOURS)}` : ''}
              </span>
            </div>
            <ul className="pr-list">
              {group.items.map((task) => (
                <TaskRow key={task.id} task={task} onEdit={openEditor} />
              ))}
            </ul>
          </section>
        ))
      )}

      <Dialog
        className="pr-dialog"
        open={draft !== null}
        onClose={closeEditor}
        dismissable
        closeLabel="Close"
      >
        {draft && editingTask && (
          <>
            <p className="pr-dialog-eyebrow">Edit task</p>
            <DialogTitle as="h2" className="pr-dialog-title">
              {editingTask.title}
            </DialogTitle>
            <dl className="pr-dialog-details">
              <dt>Project</dt>
              <dd>{editingTask.project}</dd>
              <dt>Owner</dt>
              <dd>{editingTask.owner}</dd>
              <dt>Estimate</dt>
              <dd>{formatHours(editingTask.hours)}</dd>
              <dt>Due</dt>
              <dd>{formatDue(editingTask.due)}</dd>
              <dt>Blocker</dt>
              <dd className={editingTask.blocker ? 'pr-blocker-text' : undefined}>
                {editingTask.blocker || 'None'}
              </dd>
              <dt>Saved next action</dt>
              <dd>{editingTask.nextAction}</dd>
            </dl>
            <form className="pr-form" onSubmit={handleSave} noValidate>
              <div className="pr-field">
                <label className="pr-field-label" htmlFor="task-state">
                  Task state
                </label>
                <select
                  id="task-state"
                  className="pr-select"
                  value={draft.state}
                  onChange={handleStateChange}
                  aria-invalid={blockedError ? true : undefined}
                  aria-describedby={
                    blockedError ? 'task-state-error' : planPreview ? 'task-state-hint' : undefined
                  }
                >
                  {STATES.map((state) => (
                    <option key={state} value={state}>
                      {state}
                    </option>
                  ))}
                </select>
                {blockedError && (
                  <p id="task-state-error" className="pr-error" role="alert">
                    {blockedError}
                  </p>
                )}
                {!blockedError && planPreview && (
                  <p id="task-state-hint" className="pr-hint">
                    {planPreview}
                  </p>
                )}
              </div>
              <Textarea
                id="task-next-action"
                label="Next action"
                aria-label="Next action"
                rows={3}
                value={draft.nextAction}
                onChange={handleNoteChange}
                feedback={noteError || undefined}
                aria-invalid={noteError ? true : undefined}
              />
              <p className="pr-dialog-status" role="status">
                {savedMessage}
              </p>
              <div className="pr-dialog-actions">
                <Button type="button" variant="ghost" onClick={closeEditor}>
                  Cancel
                </Button>
                <Button type="submit" variant="primary">
                  Save task
                </Button>
              </div>
            </form>
          </>
        )}
      </Dialog>
    </main>
  );
}