import { useEffect, useMemo, 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 Item = {
  id: string;
  title: string;
  project: string;
  image: string;
  alt: string;
  status: Status;
  feedback: string;
};

type SavedEntry = { status: Status; feedback: string };
type Saved = Record<string, SavedEntry>;

const STORAGE_KEY = 'review-room-v1';

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

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

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

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

function loadSaved(): Saved {
  try {
    if (typeof window === 'undefined') return {};
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (!raw) return {};
    const parsed: unknown = JSON.parse(raw);
    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {};
    const record = parsed as Record<string, unknown>;
    const saved: Saved = {};
    for (const item of ITEMS) {
      const entry = record[item.id];
      if (!entry || typeof entry !== 'object') continue;
      const { status, feedback } = entry as { status?: unknown; feedback?: unknown };
      saved[item.id] = {
        status: isStatus(status) ? status : item.status,
        feedback: typeof feedback === 'string' ? feedback : item.feedback,
      };
    }
    return saved;
  } catch {
    return {};
  }
}

function initialItems(): Item[] {
  const saved = loadSaved();
  return ITEMS.map((item) => (saved[item.id] ? { ...item, ...saved[item.id] } : item));
}

export default function App() {
  const [items, setItems] = useState<Item[]>(initialItems);
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState<Filter>('All');
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [draft, setDraft] = useState('');
  const [error, setError] = useState('');
  const [notice, setNotice] = useState('');

  const openerRef = useRef<HTMLElement | null>(null);
  const resultsRef = useRef<HTMLHeadingElement | null>(null);

  useEffect(() => {
    try {
      const payload: Saved = {};
      for (const item of items) payload[item.id] = { status: item.status, feedback: item.feedback };
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
    } catch {
      // Storage is unavailable; the session still works in memory.
    }
  }, [items]);

  // Return focus to the opener once the dialog has closed.
  useEffect(() => {
    if (selectedId !== null) return;
    const opener = openerRef.current;
    openerRef.current = null;
    const target = opener && opener.isConnected ? opener : resultsRef.current;
    if (target) requestAnimationFrame(() => target.focus());
  }, [selectedId]);

  const counts = useMemo(() => {
    const result: Record<Filter, number> = { All: items.length, 'Needs review': 0, Approved: 0, 'Changes requested': 0 };
    for (const item of items) result[item.status] += 1;
    return result;
  }, [items]);

  const visible = useMemo(() => {
    const needle = query.trim().toLowerCase();
    return items.filter((item) => {
      const matchesStatus = filter === 'All' || item.status === filter;
      const matchesQuery =
        needle === '' ||
        item.title.toLowerCase().includes(needle) ||
        item.project.toLowerCase().includes(needle);
      return matchesStatus && matchesQuery;
    });
  }, [items, query, filter]);

  const selected = selectedId === null ? null : items.find((item) => item.id === selectedId) ?? null;
  const pending = counts['Needs review'];
  const isFiltered = query.trim() !== '' || filter !== 'All';

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

  function closeReview() {
    setSelectedId(null);
  }

  function updateItem(id: string, patch: Partial<SavedEntry>) {
    setItems((current) => current.map((item) => (item.id === id ? { ...item, ...patch } : item)));
  }

  function approve() {
    if (!selected) return;
    updateItem(selected.id, { status: 'Approved', feedback: draft.trim() });
    setError('');
    setNotice('Approved. Close the review when you are ready.');
  }

  function requestChanges() {
    if (!selected) return;
    const text = draft.trim();
    if (text === '') {
      setError('Describe what should change before requesting changes.');
      setNotice('');
      return;
    }
    updateItem(selected.id, { status: 'Changes requested', feedback: text });
    setError('');
    setNotice('Changes requested. Your feedback is saved with this image.');
  }

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

  return (
    <main className="room">
      <header className="room-header">
        <div>
          <h1 className="room-title">Review room</h1>
          <p className="room-lede">
            Six photographs shared with your project partner. Approve what is ready, or say exactly what should change.
          </p>
        </div>
        <p className="room-summary" aria-live="polite">
          {pending === 0
            ? 'Every image has a decision.'
            : `${pending} of ${items.length} still ${pending === 1 ? 'needs' : 'need'} a decision.`}
        </p>
      </header>

      <section className="toolbar" aria-label="Find work">
        <div className="toolbar-search">
          <Input
            type="search"
            label="Search work"
            hint="Matches titles and projects"
            value={query}
            onChange={(event) => setQuery(event.currentTarget.value)}
            autoComplete="off"
          />
        </div>
        <div className="filters" role="group" aria-label="Filter by status">
          {FILTERS.map((value) => (
            <Button
              key={value}
              type="button"
              size="sm"
              variant={filter === value ? 'primary' : 'ghost'}
              aria-pressed={filter === value}
              className="filter"
              onClick={() => setFilter(value)}
            >
              {value}
              <span className="filter-count" aria-hidden="true">
                {counts[value]}
              </span>
            </Button>
          ))}
        </div>
      </section>

      <section className="results" aria-labelledby="results-heading">
        <h2 id="results-heading" ref={resultsRef} tabIndex={-1} className="results-heading">
          {filter === 'All' ? 'All work' : filter}
          <span className="results-count">
            {visible.length === items.length ? `${items.length} images` : `${visible.length} of ${items.length} images`}
          </span>
        </h2>

        {visible.length === 0 ? (
          <div className="empty">
            <p className="empty-title">Nothing matches</p>
            <p className="empty-text">
              {query.trim() !== ''
                ? `No titles or projects match “${query.trim()}”${filter === 'All' ? '' : ` in ${filter.toLowerCase()}`}.`
                : `There is nothing in ${filter.toLowerCase()} right now.`}
            </p>
            <Button type="button" variant="primary" onClick={clearFilters}>
              Clear filters
            </Button>
          </div>
        ) : (
          <ul className="grid">
            {visible.map((item) => (
              <li key={item.id} className="card">
                <article aria-labelledby={`title-${item.id}`}>
                  <div className="card-media">
                    <img src={item.image} alt={item.alt} loading="lazy" />
                  </div>
                  <div className="card-body">
                    <div className="card-meta">
                      <span className="card-project">{item.project}</span>
                      <Badge variant={BADGE_VARIANT[item.status]}>{item.status}</Badge>
                    </div>
                    <h3 id={`title-${item.id}`} className="card-title">
                      {item.title}
                    </h3>
                    {item.feedback !== '' && (
                      <p className="card-feedback">
                        <span className="card-feedback-label">Feedback</span>
                        {item.feedback}
                      </p>
                    )}
                    <Button
                      type="button"
                      variant="ghost"
                      className="card-action"
                      onClick={(event) => openReview(item, event.currentTarget)}
                    >
                      Review
                      <span className="sr-only"> {item.title}</span>
                    </Button>
                  </div>
                </article>
              </li>
            ))}
          </ul>
        )}

        {isFiltered && visible.length > 0 && (
          <p className="results-note">
            Showing a filtered view.{' '}
            <button type="button" className="link-button" onClick={clearFilters}>
              Show all work
            </button>
          </p>
        )}
      </section>

      <Dialog
        open={selected !== null}
        onClose={closeReview}
        onCancel={closeReview}
        className="review-dialog"
      >
        {selected && (
          <div className="review">
            <figure className="review-media">
              <img src={selected.image} alt={selected.alt} />
            </figure>
            <div className="review-panel">
              <p className="review-project">{selected.project}</p>
              <DialogTitle as="h2" className="review-title">
                {selected.title}
              </DialogTitle>

              <dl className="review-facts">
                <div className="review-fact">
                  <dt>Status</dt>
                  <dd>
                    <Badge variant={BADGE_VARIANT[selected.status]}>{selected.status}</Badge>
                  </dd>
                </div>
                <div className="review-fact">
                  <dt>Saved feedback</dt>
                  <dd>
                    {selected.feedback !== '' ? (
                      <blockquote className="review-quote">{selected.feedback}</blockquote>
                    ) : (
                      <span className="review-none">None yet</span>
                    )}
                  </dd>
                </div>
              </dl>

              <form
                className="review-form"
                noValidate
                onSubmit={(event) => {
                  event.preventDefault();
                  requestChanges();
                }}
              >
                <Textarea
                  label="Feedback"
                  rows={4}
                  value={draft}
                  onChange={(event) => {
                    setDraft(event.currentTarget.value);
                    if (error) setError('');
                  }}
                  aria-invalid={error !== '' || undefined}
                  placeholder="What should change, and where?"
                  feedback={error !== '' ? <span className="review-error">{error}</span> : undefined}
                />
                <div className="review-actions">
                  <Button type="button" variant="primary" className="review-button" onClick={approve}>
                    Approve
                  </Button>
                  <Button type="submit" variant="ghost" className="review-button">
                    Request changes
                  </Button>
                  <Button type="button" variant="ghost" className="review-button review-close" onClick={closeReview}>
                    Close review
                  </Button>
                </div>
                <p className="review-notice" aria-live="polite">
                  {notice}
                </p>
              </form>
            </div>
          </div>
        )}
      </Dialog>
    </main>
  );
}