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

type TaskState = 'This week' | 'Waiting' | 'Later' | 'Done';

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

type StoredSlice = {
  state: TaskState;
  nextAction: string;
};

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

const INITIAL_TASKS: 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.',
  },
];

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

function isTaskState(value: unknown): value is TaskState {
  return (
    value === 'This week' ||
    value === 'Waiting' ||
    value === 'Later' ||
    value === 'Done'
  );
}

function loadStored(): Record<string, StoredSlice> {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return {};
    const parsed = JSON.parse(raw) as unknown;
    if (!parsed || typeof parsed !== 'object') return {};
    const source = parsed as Record<string, unknown>;
    const next: Record<string, StoredSlice> = {};
    for (const task of INITIAL_TASKS) {
      const entry = source[task.id];
      if (!entry || typeof entry !== 'object') continue;
      const record = entry as Record<string, unknown>;
      if (!isTaskState(record.state) || typeof record.nextAction !== 'string') {
        continue;
      }
      next[task.id] = {
        state: record.state,
        nextAction: record.nextAction,
      };
    }
    return next;
  } catch {
    return {};
  }
}

function formatDue(due: string | null): string {
  if (!due) return 'No due date';
  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(due);
  if (!match) return due;
  const months = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];
  const month = months[Number(match[2]) - 1] ?? match[2];
  return `${month} ${Number(match[3])}, ${match[1]}`;
}

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

export default function App() {
  const searchId = useId();
  const stateId = useId();
  const nextActionId = useId();
  const formErrorId = useId();
  const confirmId = useId();

  const [stored, setStored] = useState<Record<string, StoredSlice>>(() => loadStored());
  const [search, setSearch] = useState('');
  const [filter, setFilter] = useState<Filter>('All');
  const [openId, setOpenId] = useState<string | null>(null);
  const [draftState, setDraftState] = useState<TaskState>('This week');
  const [draftNextAction, setDraftNextAction] = useState('');
  const [formError, setFormError] = useState<string | null>(null);
  const [saveConfirm, setSaveConfirm] = useState<string | null>(null);

  const openerRef = useRef<HTMLButtonElement | null>(null);
  const editButtonsRef = useRef<Map<string, HTMLButtonElement>>(new Map());
  const filterButtonsRef = useRef<Map<Filter, HTMLButtonElement>>(new Map());

  const tasks = useMemo(
    () =>
      INITIAL_TASKS.map((task) => ({
        ...task,
        state: stored[task.id]?.state ?? task.state,
        nextAction: stored[task.id]?.nextAction ?? task.nextAction,
      })),
    [stored],
  );

  useEffect(() => {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
    } catch {
      // Ignore quota / private-mode failures.
    }
  }, [stored]);

  const counts = useMemo(() => {
    const next = {
      All: tasks.length,
      'This week': 0,
      Waiting: 0,
      Later: 0,
      Done: 0,
    };
    for (const task of tasks) {
      next[task.state] += 1;
    }
    return next;
  }, [tasks]);

  const plannedHours = useMemo(
    () =>
      tasks
        .filter((task) => task.state === 'This week')
        .reduce((sum, task) => sum + task.hours, 0),
    [tasks],
  );

  const remainingHours = CAPACITY_HOURS - plannedHours;
  const overCapacity = plannedHours > CAPACITY_HOURS;

  const visible = useMemo(() => {
    const q = search.trim().toLowerCase();
    return tasks.filter((task) => {
      const matchesFilter = filter === 'All' || task.state === filter;
      const matchesSearch =
        q.length === 0 ||
        task.title.toLowerCase().includes(q) ||
        task.project.toLowerCase().includes(q) ||
        task.owner.toLowerCase().includes(q);
      return matchesFilter && matchesSearch;
    });
  }, [tasks, filter, search]);

  const openTask = openId ? tasks.find((task) => task.id === openId) ?? null : null;

  const persistTask = useCallback((id: string, state: TaskState, nextAction: string) => {
    setStored((prev) => ({
      ...prev,
      [id]: { state, nextAction },
    }));
  }, []);

  const openEdit = (id: string) => {
    const task = tasks.find((entry) => entry.id === id);
    if (!task) return;
    openerRef.current = editButtonsRef.current.get(id) ?? null;
    setOpenId(id);
    setDraftState(task.state);
    setDraftNextAction(task.nextAction);
    setFormError(null);
    setSaveConfirm(null);
  };

  const returnFocus = () => {
    const opener = openerRef.current;
    window.requestAnimationFrame(() => {
      if (opener && document.body.contains(opener) && opener.offsetParent !== null) {
        opener.focus();
        return;
      }
      filterButtonsRef.current.get(filter)?.focus();
    });
  };

  const closeDialog = () => {
    setOpenId(null);
    setFormError(null);
    setSaveConfirm(null);
    returnFocus();
  };

  const clearFilters = () => {
    setSearch('');
    setFilter('All');
  };

  const saveTask = (event?: FormEvent) => {
    event?.preventDefault();
    if (!openTask) return;

    const trimmed = draftNextAction.trim();
    if (!trimmed) {
      setSaveConfirm(null);
      setFormError('Add a next-action note before saving.');
      return;
    }

    if (openTask.blocker.trim() && draftState === 'This week') {
      setSaveConfirm(null);
      setFormError(
        `This task stays blocked: ${openTask.blocker} Move it to Waiting, Later, or Done instead.`,
      );
      return;
    }

    persistTask(openTask.id, draftState, trimmed);
    setDraftNextAction(trimmed);
    setFormError(null);
    setSaveConfirm('Task saved. Totals update with the current This week plan.');
  };

  return (
    <div className="pr">
      <header className="pr__header">
        <div className="pr__header-copy">
          <p className="pr__eyebrow">Planning room</p>
          <h1 className="pr__title">Choose a week that can actually ship</h1>
          <p className="pr__lede">
            Review week {WEEK_LABEL}. You have {CAPACITY_HOURS} focused hours.
            Pull unblocked work into This week, keep waiting work visible, and
            leave a clear next action on every task.
          </p>
        </div>

        <div className="pr__capacity" aria-live="polite">
          <div className="pr__metric">
            <span className="pr__metric-label">Planned</span>
            <strong className="pr__metric-value">{plannedHours}h</strong>
          </div>
          <div className="pr__metric">
            <span className="pr__metric-label">Capacity</span>
            <strong className="pr__metric-value">{CAPACITY_HOURS}h</strong>
          </div>
          <div className={`pr__metric${overCapacity ? ' pr__metric--warn' : ''}`}>
            <span className="pr__metric-label">
              {overCapacity ? 'Over by' : 'Remaining'}
            </span>
            <strong className="pr__metric-value">
              {overCapacity ? `${plannedHours - CAPACITY_HOURS}h` : `${remainingHours}h`}
            </strong>
          </div>
          {overCapacity ? (
            <p className="pr__capacity-note" role="status">
              This week is {plannedHours - CAPACITY_HOURS} hours over the {CAPACITY_HOURS}-hour
              capacity. You can keep that plan, but something will slip.
            </p>
          ) : (
            <p className="pr__capacity-note">
              Waiting, later, and done work do not count toward this total.
            </p>
          )}
        </div>
      </header>

      <section className="pr__toolbar" aria-label="Filters and search">
        <div className="pr__search">
          <Input
            id={searchId}
            name="Search tasks"
            label="Search tasks"
            type="search"
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            placeholder="Search title, project, or owner"
            autoComplete="off"
          />
        </div>

        <div className="pr__filters" role="group" aria-label="Task state filter">
          {FILTERS.map((name) => {
            const selected = filter === name;
            return (
              <div key={name} className="pr__filter">
                <Button
                  type="button"
                  name={name}
                  variant={selected ? 'primary' : 'ghost'}
                  aria-pressed={selected}
                  ref={(node) => {
                    if (node) filterButtonsRef.current.set(name, node);
                    else filterButtonsRef.current.delete(name);
                  }}
                  onClick={() => setFilter(name)}
                >
                  {name}
                </Button>
                <span className="pr__count" aria-hidden="true">
                  {counts[name]}
                </span>
                <span className="pr__sr-only">{counts[name]} tasks</span>
              </div>
            );
          })}
        </div>
      </section>

      {visible.length === 0 ? (
        <div className="pr__empty" role="status">
          <h2 className="pr__empty-title">No matching tasks</h2>
          <p className="pr__empty-copy">
            Nothing matches this search and filter. Clear them to see the full
            review week again.
          </p>
          <Button type="button" name="Clear filters" variant="primary" onClick={clearFilters}>
            Clear filters
          </Button>
        </div>
      ) : (
        <ul className="pr__list">
          {visible.map((task) => (
            <li key={task.id} className="pr__card">
              <article className="pr__card-inner">
                <div className="pr__card-top">
                  <div className="pr__card-meta">
                    <p className="pr__project">{task.project}</p>
                    <Badge variant={badgeVariant(task.state)}>{task.state}</Badge>
                  </div>
                  <h2 className="pr__card-title">{task.title}</h2>
                </div>

                <dl className="pr__facts">
                  <div>
                    <dt>Owner</dt>
                    <dd>{task.owner}</dd>
                  </div>
                  <div>
                    <dt>Estimate</dt>
                    <dd>{task.hours}h</dd>
                  </div>
                  <div>
                    <dt>Due</dt>
                    <dd>{formatDue(task.due)}</dd>
                  </div>
                </dl>

                {task.blocker ? (
                  <p className="pr__blocker">
                    <span className="pr__blocker-label">Blocked</span>
                    {task.blocker}
                  </p>
                ) : null}

                <p className="pr__next">
                  <span className="pr__next-label">Next action</span>
                  {task.nextAction}
                </p>

                <Button
                  type="button"
                  className="pr__edit"
                  name={`Edit ${task.title}`}
                  variant="primary"
                  ref={(node) => {
                    if (node) editButtonsRef.current.set(task.id, node);
                    else editButtonsRef.current.delete(task.id);
                  }}
                  onClick={() => openEdit(task.id)}
                >
                  Edit
                </Button>
              </article>
            </li>
          ))}
        </ul>
      )}

      <Dialog
        open={openTask !== null}
        onClose={closeDialog}
        dismissable
        lightDismiss
        closeLabel="Cancel"
        className="pr__dialog"
      >
        {openTask ? (
          <form className="pr__dialog-layout" onSubmit={saveTask}>
            <DialogTitle as="h2" className="pr__dialog-title">
              Edit {openTask.title}
            </DialogTitle>

            <div className="pr__dialog-summary">
              <p className="pr__project">{openTask.project}</p>
              <p className="pr__dialog-item-title">{openTask.title}</p>
              <dl className="pr__facts pr__facts--dialog">
                <div>
                  <dt>Owner</dt>
                  <dd>{openTask.owner}</dd>
                </div>
                <div>
                  <dt>Estimate</dt>
                  <dd>{openTask.hours}h</dd>
                </div>
                <div>
                  <dt>Due</dt>
                  <dd>{formatDue(openTask.due)}</dd>
                </div>
              </dl>
              {openTask.blocker ? (
                <p className="pr__blocker">
                  <span className="pr__blocker-label">Blocked</span>
                  {openTask.blocker}
                </p>
              ) : (
                <p className="pr__unblocked">No blocker on this task.</p>
              )}
            </div>

            <div className="pr__field">
              <label className="pr__label" htmlFor={stateId}>
                Task state
              </label>
              <select
                id={stateId}
                name="Task state"
                className="pr__select"
                value={draftState}
                aria-invalid={formError ? true : undefined}
                onChange={(event) => {
                  setDraftState(event.target.value as TaskState);
                  setFormError(null);
                  setSaveConfirm(null);
                }}
              >
                {TASK_STATES.map((state) => (
                  <option key={state} value={state}>
                    {state}
                  </option>
                ))}
              </select>
            </div>

            <Textarea
              id={nextActionId}
              name="Next action"
              label="Next action"
              value={draftNextAction}
              rows={4}
              onChange={(event) => {
                setDraftNextAction(event.target.value);
                setFormError(null);
                setSaveConfirm(null);
              }}
              aria-invalid={formError ? true : undefined}
              aria-describedby={
                formError ? formErrorId : saveConfirm ? confirmId : undefined
              }
              feedback={
                formError ? (
                  <span id={formErrorId} className="pr__error" role="alert">
                    {formError}
                  </span>
                ) : saveConfirm ? (
                  <span id={confirmId} className="pr__confirm" role="status">
                    {saveConfirm}
                  </span>
                ) : undefined
              }
            />

            <div className="pr__dialog-actions">
              <Button type="submit" name="Save task" variant="primary">
                Save task
              </Button>
              <Button type="button" name="Cancel" variant="ghost" onClick={closeDialog}>
                Cancel
              </Button>
            </div>
          </form>
        ) : null}
      </Dialog>
    </div>
  );
}