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

type Status = 'Needs review' | 'Approved' | 'Changes requested';
type Filter = 'All' | Status;
type BadgeVariant = 'outline' | 'solid' | 'muted';

interface Item {
  id: string;
  title: string;
  project: string;
  image: string;
  alt: string;
  status: Status;
  feedback: string;
}

interface Message {
  kind: 'success' | 'error';
  text: string;
}

const STORAGE_KEY = 'review-room-plan-v2';

const STATUSES: readonly Status[] = ['Needs review', 'Approved', 'Changes requested'];
const FILTERS: readonly Filter[] = ['All', 'Needs review', 'Approved', 'Changes requested'];

const BADGE_VARIANTS: Record<Status, BadgeVariant> = {
  'Needs review': 'outline',
  Approved: 'solid',
  'Changes requested': 'muted',
};

const BASE_ITEMS: readonly Item[] = [
  {
    id: '01',
    title: 'Field notes',
    project: 'Polder',
    image: '/assets/01.jpg',
    alt: 'Laundry beside a brick house overlooking fields.',
    status: 'Needs review',
    feedback: '',
  },
  {
    id: '02',
    title: 'A place to pause',
    project: 'Polder',
    image: '/assets/02.jpg',
    alt: 'Two chairs and a thermos beside the water.',
    status: 'Needs review',
    feedback: '',
  },
  {
    id: '03',
    title: 'Through the dike',
    project: 'Noord',
    image: '/assets/03.jpg',
    alt: 'A cyclist emerging from a concrete passage through a dike.',
    status: 'Approved',
    feedback: '',
  },
  {
    id: '04',
    title: 'Outside Café De Polder',
    project: 'Polder',
    image: '/assets/04.jpg',
    alt: 'A person and a dog outside Café De Polder.',
    status: 'Changes requested',
    feedback: 'Leave more room around the entrance.',
  },
  {
    id: '05',
    title: 'The waiting place at the edge of the field',
    project: 'Noord',
    image: '/assets/05.jpg',
    alt: 'A roadside shelter in an open Dutch landscape.',
    status: 'Needs review',
    feedback: '',
  },
  {
    id: '06',
    title: 'Walking home',
    project: 'Noord',
    image: '/assets/06.jpg',
    alt: 'A person and a dog on a path beside open fields.',
    status: 'Approved',
    feedback: '',
  },
];

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

function isStatus(value: unknown): value is Status {
  return typeof value === 'string' && (STATUSES as readonly string[]).includes(value);
}

function loadItems(): Item[] {
  if (typeof window === 'undefined') {
    return BASE_ITEMS.map((base) => ({ ...base }));
  }

  let stored: unknown = null;
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (raw !== null) {
      stored = JSON.parse(raw);
    }
  } catch {
    stored = null;
  }

  const record = isRecord(stored) ? stored : {};

  return BASE_ITEMS.map((base) => {
    const entry = record[base.id];
    if (!isRecord(entry)) {
      return { ...base };
    }
    return {
      ...base,
      status: isStatus(entry.status) ? entry.status : base.status,
      feedback: typeof entry.feedback === 'string' ? entry.feedback : base.feedback,
    };
  });
}

function saveItems(items: readonly Item[]): void {
  if (typeof window === 'undefined') {
    return;
  }
  try {
    const record: Record<string, { status: Status; feedback: string }> = {};
    for (const item of items) {
      record[item.id] = { status: item.status, feedback: item.feedback };
    }
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(record));
  } catch {
    // Storage can be unavailable or full. The in-memory state still works.
  }
}

function StatusBadge({ status }: { status: Status }) {
  return <Badge variant={BADGE_VARIANTS[status]}>{status}</Badge>;
}

export default function App() {
  const [items, setItems] = useState<Item[]>(loadItems);
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState<Filter>('All');
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [draft, setDraft] = useState('');
  const [message, setMessage] = useState<Message | null>(null);
  const openerRef = useRef<HTMLElement | null>(null);
  const searchFormRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    saveItems(items);
  }, [items]);

  useEffect(() => {
    if (selectedId !== null) {
      return;
    }
    const opener = openerRef.current;
    if (opener === null) {
      return;
    }
    openerRef.current = null;
    if (opener.isConnected) {
      opener.focus();
    } else {
      searchFormRef.current?.querySelector('input')?.focus();
    }
  }, [selectedId]);

  const normalizedQuery = query.trim().toLowerCase();
  const visibleItems = items.filter((item) => {
    const matchesFilter = filter === 'All' || item.status === filter;
    const matchesQuery =
      normalizedQuery === '' ||
      item.title.toLowerCase().includes(normalizedQuery) ||
      item.project.toLowerCase().includes(normalizedQuery);
    return matchesFilter && matchesQuery;
  });
  const approvedCount = items.filter((item) => item.status === 'Approved').length;
  const selected = selectedId === null ? undefined : items.find((item) => item.id === selectedId);
  const hasError = message !== null && message.kind === 'error';

  function focusSearch() {
    searchFormRef.current?.querySelector('input')?.focus();
  }

  function clearFilters() {
    setQuery('');
    setFilter('All');
    focusSearch();
  }

  function openReview(item: Item, opener: HTMLElement) {
    openerRef.current = opener;
    setDraft(item.feedback);
    setMessage(null);
    setSelectedId(item.id);
  }

  function closeReview() {
    setSelectedId(null);
  }

  function updateItem(id: string, patch: Partial<Pick<Item, 'status' | 'feedback'>>) {
    setItems((previous) => previous.map((item) => (item.id === id ? { ...item, ...patch } : item)));
  }

  function approve() {
    if (selected === undefined) {
      return;
    }
    const feedback = draft.trim();
    updateItem(selected.id, { status: 'Approved', feedback });
    setMessage({
      kind: 'success',
      text: feedback === '' ? 'Marked as approved.' : 'Marked as approved. Feedback saved.',
    });
  }

  function requestChanges() {
    if (selected === undefined) {
      return;
    }
    const feedback = draft.trim();
    if (feedback === '') {
      setMessage({ kind: 'error', text: 'Write feedback before requesting changes.' });
      return;
    }
    updateItem(selected.id, { status: 'Changes requested', feedback });
    setMessage({ kind: 'success', text: 'Changes requested. Feedback saved.' });
  }

  function describeEmptyState(): string {
    const trimmed = query.trim();
    if (trimmed !== '' && filter !== 'All') {
      return `No photographs match “${trimmed}” with the status “${filter}”.`;
    }
    if (trimmed !== '') {
      return `No photographs match “${trimmed}”.`;
    }
    return `No photographs have the status “${filter}”.`;
  }

  return (
    <main className="page">
      <header className="page-header">
        <div className="page-heading">
          <h1 className="page-title">Review room</h1>
          <p className="page-lede">Choose a photograph to review.</p>
        </div>
        <p className="page-summary">
          {approvedCount} of {items.length} approved
        </p>
      </header>

      <div className="toolbar">
        <form
          className="toolbar-search"
          role="search"
          ref={searchFormRef}
          onSubmit={(event) => event.preventDefault()}
        >
          <Input
            type="text"
            name="search"
            aria-label="Search work"
            placeholder="Search by title or project"
            autoComplete="off"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
          />
        </form>
        <div className="toolbar-filters" role="group" aria-label="Filter by status">
          {FILTERS.map((option) => (
            <Button
              key={option}
              type="button"
              variant="ghost"
              aria-pressed={filter === option}
              onClick={() => setFilter(option)}
            >
              {option}
            </Button>
          ))}
        </div>
      </div>

      {visibleItems.length > 0 ? (
        <ul className="collection">
          {visibleItems.map((item) => (
            <li key={item.id} className="card">
              <img className="card-image" src={item.image} alt={item.alt} />
              <h2 className="card-title">{item.title}</h2>
              <p className="card-meta">
                <span className="card-project">{item.project}</span>
                <span className="card-status">
                  <StatusBadge status={item.status} />
                </span>
              </p>
              <div className="card-actions">
                <Button
                  type="button"
                  variant="ghost"
                  onClick={(event) => openReview(item, event.currentTarget)}
                >
                  Review <span className="visually-hidden">{item.title}</span>
                </Button>
              </div>
            </li>
          ))}
        </ul>
      ) : (
        <div className="empty">
          <h2 className="empty-title">No matching photographs</h2>
          <p className="empty-text">{describeEmptyState()}</p>
          <Button type="button" variant="primary" onClick={clearFilters}>
            Clear filters
          </Button>
        </div>
      )}

      <Dialog
        open={selected !== undefined}
        onClose={closeReview}
        closeLabel="Close"
        className="review-dialog"
        aria-label={selected === undefined ? undefined : selected.title}
      >
        {selected !== undefined && (
          <div className="review-layout">
            <div className="review-media">
              <img className="review-image" src={selected.image} alt={selected.alt} />
            </div>
            <div className="review-controls">
              <DialogTitle as="h2" className="review-title">
                {selected.title}
              </DialogTitle>
              <dl className="review-details">
                <div className="review-detail">
                  <dt>Project</dt>
                  <dd>{selected.project}</dd>
                </div>
                <div className="review-detail">
                  <dt>Status</dt>
                  <dd className="review-status">
                    <StatusBadge status={selected.status} />
                  </dd>
                </div>
                <div className="review-detail">
                  <dt>Saved feedback</dt>
                  <dd className="review-feedback">
                    {selected.feedback === '' ? 'No feedback yet.' : selected.feedback}
                  </dd>
                </div>
              </dl>
              <Textarea
                id="review-feedback"
                name="feedback"
                label="Feedback"
                rows={4}
                value={draft}
                onChange={(event) => setDraft(event.target.value)}
                aria-invalid={hasError ? true : undefined}
                aria-describedby={hasError ? 'review-message' : undefined}
              />
              <div className="review-actions">
                <Button type="button" variant="primary" onClick={approve}>
                  Approve
                </Button>
                <Button type="button" variant="ghost" onClick={requestChanges}>
                  Request changes
                </Button>
                <Button type="button" variant="ghost" onClick={closeReview}>
                  Close review
                </Button>
              </div>
              <div className="review-message" id="review-message" role="status">
                {message !== null && (
                  <p className={message.kind === 'error' ? 'review-note review-note--error' : 'review-note'}>
                    {message.text}
                  </p>
                )}
              </div>
            </div>
          </div>
        )}
      </Dialog>
    </main>
  );
}