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

type Status = 'Needs review' | 'Approved' | 'Changes requested';

type WorkItem = {
  id: string;
  title: string;
  project: string;
  image: string;
  alt: string;
  status: Status;
  feedback: string;
};

type StoredState = {
  statuses: Record<string, Status>;
  feedback: Record<string, string>;
};

const STORAGE_KEY = 'review-room-v1';

const INITIAL_ITEMS: WorkItem[] = [
  {
    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 FILTERS = ['All', 'Needs review', 'Approved', 'Changes requested'] as const;
type Filter = (typeof FILTERS)[number];

function isStatus(value: unknown): value is Status {
  return (
    value === 'Needs review' ||
    value === 'Approved' ||
    value === 'Changes requested'
  );
}

function loadStored(): StoredState {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) {
      return { statuses: {}, feedback: {} };
    }
    const parsed = JSON.parse(raw) as unknown;
    if (!parsed || typeof parsed !== 'object') {
      return { statuses: {}, feedback: {} };
    }
    const record = parsed as Record<string, unknown>;
    const statuses: Record<string, Status> = {};
    const feedback: Record<string, string> = {};

    const statusSource =
      record.statuses && typeof record.statuses === 'object'
        ? (record.statuses as Record<string, unknown>)
        : {};
    const feedbackSource =
      record.feedback && typeof record.feedback === 'object'
        ? (record.feedback as Record<string, unknown>)
        : {};

    for (const item of INITIAL_ITEMS) {
      if (isStatus(statusSource[item.id])) {
        statuses[item.id] = statusSource[item.id];
      }
      if (typeof feedbackSource[item.id] === 'string') {
        feedback[item.id] = feedbackSource[item.id];
      }
    }

    return { statuses, feedback };
  } catch {
    return { statuses: {}, feedback: {} };
  }
}

function badgeVariant(status: Status): 'outline' | 'solid' | 'muted' {
  if (status === 'Approved') return 'solid';
  if (status === 'Changes requested') return 'outline';
  return 'muted';
}

export default function App() {
  const searchId = useId();
  const feedbackId = useId();
  const errorId = useId();

  const [stored, setStored] = useState<StoredState>(() => loadStored());
  const [search, setSearch] = useState('');
  const [filter, setFilter] = useState<Filter>('All');
  const [openId, setOpenId] = useState<string | null>(null);
  const [draftFeedback, setDraftFeedback] = useState('');
  const [feedbackError, setFeedbackError] = useState<string | null>(null);

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

  const items = useMemo(
    () =>
      INITIAL_ITEMS.map((item) => ({
        ...item,
        status: stored.statuses[item.id] ?? item.status,
        feedback: stored.feedback[item.id] ?? item.feedback,
      })),
    [stored],
  );

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

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

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

  const openItem = openId ? items.find((item) => item.id === openId) ?? null : null;

  const persistItem = useCallback((id: string, status: Status, feedback: string) => {
    setStored((prev) => ({
      statuses: { ...prev.statuses, [id]: status },
      feedback: { ...prev.feedback, [id]: feedback },
    }));
  }, []);

  const openReview = (id: string) => {
    const item = items.find((entry) => entry.id === id);
    if (!item) return;
    openerRef.current = reviewButtonsRef.current.get(id) ?? null;
    setOpenId(id);
    setDraftFeedback(item.feedback);
    setFeedbackError(null);
  };

  const closeReview = () => {
    setOpenId(null);
    setFeedbackError(null);
    const opener = openerRef.current;
    window.requestAnimationFrame(() => {
      opener?.focus();
    });
  };

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

  const approve = () => {
    if (!openItem) return;
    const nextFeedback = draftFeedback;
    persistItem(openItem.id, 'Approved', nextFeedback);
    setFeedbackError(null);
  };

  const requestChanges = (event?: FormEvent) => {
    event?.preventDefault();
    if (!openItem) return;
    const trimmed = draftFeedback.trim();
    if (!trimmed) {
      setFeedbackError('Add a specific request before asking for changes.');
      return;
    }
    persistItem(openItem.id, 'Changes requested', trimmed);
    setDraftFeedback(trimmed);
    setFeedbackError(null);
  };

  const needsDecision = counts['Needs review'] + counts['Changes requested'];

  return (
    <div className="rr">
      <header className="rr__header">
        <div className="rr__header-copy">
          <p className="rr__eyebrow">Review room</p>
          <h1 className="rr__title">Six photographs to decide together</h1>
          <p className="rr__lede">
            See what still needs a decision, inspect an image, then approve it or
            leave a specific request for changes.
          </p>
        </div>
        <div className="rr__summary" aria-live="polite">
          <span className="rr__summary-label">Still open</span>
          <strong className="rr__summary-value">{needsDecision}</strong>
        </div>
      </header>

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

        <div className="rr__filters" role="group" aria-label="Status filter">
          {FILTERS.map((name) => {
            const selected = filter === name;
            return (
              <div key={name} className="rr__filter">
                <Button
                  type="button"
                  name={name}
                  variant={selected ? 'primary' : 'ghost'}
                  aria-pressed={selected}
                  onClick={() => setFilter(name)}
                >
                  {name}
                </Button>
                <span className="rr__count" aria-hidden="true">
                  {counts[name]}
                </span>
                <span className="rr__sr-only">{counts[name]} items</span>
              </div>
            );
          })}
        </div>
      </section>

      {visible.length === 0 ? (
        <div className="rr__empty" role="status">
          <h2 className="rr__empty-title">No matching work</h2>
          <p className="rr__empty-copy">
            Nothing matches this search and filter. Clear them to see all six
            photographs again.
          </p>
          <Button type="button" name="Clear filters" variant="primary" onClick={clearFilters}>
            Clear filters
          </Button>
        </div>
      ) : (
        <ul className="rr__grid">
          {visible.map((item) => (
            <li key={item.id} className="rr__card">
              <article className="rr__card-inner">
                <div className="rr__media">
                  <img src={item.image} alt={item.alt} loading="lazy" />
                </div>
                <div className="rr__card-body">
                  <div className="rr__card-meta">
                    <p className="rr__project">{item.project}</p>
                    <Badge variant={badgeVariant(item.status)}>{item.status}</Badge>
                  </div>
                  <h2 className="rr__card-title">{item.title}</h2>
                  {item.feedback ? (
                    <p className="rr__card-feedback">{item.feedback}</p>
                  ) : null}
                  <Button
                    type="button"
                    className="rr__review"
                    name={`Review ${item.title}`}
                    variant="primary"
                    ref={(node) => {
                      if (node) {
                        reviewButtonsRef.current.set(item.id, node);
                      } else {
                        reviewButtonsRef.current.delete(item.id);
                      }
                    }}
                    onClick={() => openReview(item.id)}
                  >
                    Review
                  </Button>
                </div>
              </article>
            </li>
          ))}
        </ul>
      )}

      <Dialog
        open={openItem !== null}
        onClose={closeReview}
        dismissable
        lightDismiss
        closeLabel="Close review"
        className="rr__dialog"
      >
        {openItem ? (
          <div className="rr__dialog-layout">
            <DialogTitle as="h2" className="rr__dialog-title">
              Review {openItem.title}
            </DialogTitle>

            <div className="rr__dialog-media">
              <img src={openItem.image} alt={openItem.alt} />
            </div>

            <div className="rr__dialog-info">
              <p className="rr__project">{openItem.project}</p>
              <p className="rr__dialog-item-title">{openItem.title}</p>
              <Badge variant={badgeVariant(openItem.status)}>{openItem.status}</Badge>
              {openItem.feedback ? (
                <p className="rr__saved-feedback">
                  <span className="rr__saved-label">Saved feedback</span>
                  {openItem.feedback}
                </p>
              ) : (
                <p className="rr__saved-feedback rr__saved-feedback--empty">
                  No feedback saved yet.
                </p>
              )}
            </div>

            <form className="rr__dialog-actions" onSubmit={requestChanges}>
              <Textarea
                id={feedbackId}
                name="Feedback"
                label="Feedback"
                value={draftFeedback}
                onChange={(event) => {
                  setDraftFeedback(event.target.value);
                  if (feedbackError) setFeedbackError(null);
                }}
                rows={4}
                aria-invalid={feedbackError ? true : undefined}
                aria-describedby={feedbackError ? errorId : undefined}
                feedback={
                  feedbackError ? (
                    <span id={errorId} className="rr__error" role="alert">
                      {feedbackError}
                    </span>
                  ) : undefined
                }
              />

              <div className="rr__dialog-buttons">
                <Button type="button" name="Approve" variant="primary" onClick={approve}>
                  Approve
                </Button>
                <Button type="submit" name="Request changes" variant="ghost">
                  Request changes
                </Button>
                <Button type="button" name="Close review" variant="ghost" onClick={closeReview}>
                  Close review
                </Button>
              </div>
            </form>
          </div>
        ) : null}
      </Dialog>
    </div>
  );
}