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

type Status = "Needs review" | "Approved" | "Changes requested";
type Filter = "All" | Status;

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

const STORAGE_KEY = "review-room-v1";
const FILTERS: Filter[] = [
  "All",
  "Needs review",
  "Approved",
  "Changes requested",
];

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: "",
  },
];

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 (
    value === "Needs review" ||
    value === "Approved" ||
    value === "Changes requested"
  );
}

function restoreItems(): WorkItem[] {
  try {
    const stored: unknown = JSON.parse(
      window.localStorage.getItem(STORAGE_KEY) ?? "null",
    );

    if (!isRecord(stored)) return INITIAL_ITEMS;

    return INITIAL_ITEMS.map((item) => {
      const saved = stored[item.id];
      if (!isRecord(saved)) return item;

      return {
        ...item,
        status: isStatus(saved.status) ? saved.status : item.status,
        feedback:
          typeof saved.feedback === "string" ? saved.feedback : item.feedback,
      };
    });
  } catch {
    return INITIAL_ITEMS;
  }
}

function StatusBadge({ status }: { status: Status }) {
  return (
    <Badge
      variant={
        status === "Approved"
          ? "solid"
          : status === "Changes requested"
            ? "outline"
            : "muted"
      }
      className="status-badge"
    >
      {status}
    </Badge>
  );
}

export default function App() {
  const [items, setItems] = useState<WorkItem[]>(restoreItems);
  const [query, setQuery] = useState("");
  const [filter, setFilter] = useState<Filter>("All");
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [feedback, setFeedback] = useState("");
  const [feedbackError, setFeedbackError] = useState(false);
  const [confirmation, setConfirmation] = useState("");
  const [storageError, setStorageError] = useState(false);
  const openerRef = useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    try {
      const saved = Object.fromEntries(
        items.map(({ id, status, feedback: savedFeedback }) => [
          id,
          { status, feedback: savedFeedback },
        ]),
      );
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(saved));
      setStorageError(false);
    } catch {
      setStorageError(true);
    }
  }, [items]);

  const counts: Record<Filter, number> = {
    All: items.length,
    "Needs review": items.filter((item) => item.status === "Needs review").length,
    Approved: items.filter((item) => item.status === "Approved").length,
    "Changes requested": items.filter(
      (item) => item.status === "Changes requested",
    ).length,
  };

  const normalizedQuery = query.trim().toLowerCase();
  const visibleItems = items.filter(
    (item) =>
      (filter === "All" || item.status === filter) &&
      (item.title.toLowerCase().includes(normalizedQuery) ||
        item.project.toLowerCase().includes(normalizedQuery)),
  );
  const selectedItem = items.find((item) => item.id === selectedId);

  function openReview(item: WorkItem, opener: HTMLButtonElement) {
    openerRef.current = opener;
    setFeedback(item.feedback);
    setFeedbackError(false);
    setConfirmation("");
    setSelectedId(item.id);
  }

  function closeReview() {
    if (selectedId === null) return;

    const opener = openerRef.current;
    setSelectedId(null);
    setFeedbackError(false);
    setConfirmation("");

    window.requestAnimationFrame(() => {
      if (opener?.isConnected) opener.focus();
    });
  }

  function saveDecision(status: Status) {
    if (!selectedItem) return;

    const trimmedFeedback = feedback.trim();
    if (status === "Changes requested" && !trimmedFeedback) {
      setFeedbackError(true);
      setConfirmation("");
      document.getElementById("review-feedback")?.focus();
      return;
    }

    setItems((current) =>
      current.map((item) =>
        item.id === selectedItem.id
          ? { ...item, status, feedback: trimmedFeedback }
          : item,
      ),
    );
    setFeedback(trimmedFeedback);
    setFeedbackError(false);

    // Preserve the opener when the decision moves this item out of its filter.
    const changedFilter = filter !== "All" && filter !== status;
    if (changedFilter) setFilter("All");

    setConfirmation(
      `${status === "Approved" ? "Photograph approved." : "Changes requested. Feedback saved."}${
        changedFilter ? " The collection now shows all work." : ""
      }`,
    );
  }

  function clearFilters() {
    setQuery("");
    setFilter("All");
    document.getElementById("work-search")?.focus();
  }

  return (
    <div className="review-room">
      <header className="masthead">
        <span className="project-names">
          Polder <span aria-hidden="true">/</span> Noord
        </span>
        <span className="masthead-note">Photography selection</span>
      </header>

      <main id="main">
        <section className="introduction" aria-labelledby="room-title">
          <div className="introduction-copy">
            <p className="eyebrow">A closer look</p>
            <h1 id="room-title">Review room</h1>
            <p className="intro-description">
              Six photographs to consider together. Approve a favorite, or say
              what needs another look.
            </p>
          </div>

          <div className="review-progress">
            <div className="progress-label">
              <strong>{counts.Approved}</strong>
              <span>of {items.length} approved</span>
            </div>
            <progress
              value={counts.Approved}
              max={items.length}
              aria-label={`${counts.Approved} of ${items.length} photographs approved`}
            />
            <p>{counts["Needs review"]} still need review</p>
          </div>
        </section>

        <section className="collection" aria-label="Photographs">
          <div className="collection-tools">
            <div className="filter-group" role="group" aria-label="Filter by status">
              {FILTERS.map((option) => (
                <Button
                  key={option}
                  type="button"
                  variant={filter === option ? "primary" : "ghost"}
                  aria-label={option}
                  aria-pressed={filter === option}
                  onClick={() => setFilter(option)}
                  className="filter-button"
                >
                  {option}
                  <span className="filter-count" aria-hidden="true">
                    {counts[option]}
                  </span>
                </Button>
              ))}
            </div>

            <div className="search-field">
              <Input
                id="work-search"
                type="search"
                label="Search work"
                placeholder="Search by title or project"
                value={query}
                onChange={(event) => setQuery(event.target.value)}
              />
            </div>
          </div>

          <div className="collection-summary">
            <p role="status">
              Showing {visibleItems.length} of {items.length} photographs
            </p>
            <span>Collection 01</span>
          </div>

          {visibleItems.length > 0 ? (
            <ul className="work-grid">
              {visibleItems.map((item) => (
                <li key={item.id}>
                  <article className="work-card">
                    <div className="photo-frame">
                      <img
                        src={item.image}
                        alt={item.alt}
                        width={1500}
                        height={1000}
                        decoding="async"
                      />
                      <span className="photo-number" aria-hidden="true">
                        {item.id}
                      </span>
                    </div>

                    <div className="card-content">
                      <div className="card-context">
                        <span className="project-label">{item.project}</span>
                        <StatusBadge status={item.status} />
                      </div>
                      <div className="card-heading">
                        <h2>{item.title}</h2>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="review-button"
                          aria-label={`Review ${item.title}`}
                          onClick={(event) => openReview(item, event.currentTarget)}
                        >
                          Review <span aria-hidden="true">↗</span>
                        </Button>
                      </div>
                    </div>
                  </article>
                </li>
              ))}
            </ul>
          ) : (
            <div className="empty-state">
              <span className="empty-mark" aria-hidden="true">
                Ø
              </span>
              <h2>No photographs found</h2>
              <p>
                Try a different title or project, or clear your filters to see
                all six photographs.
              </p>
              <Button type="button" onClick={clearFilters}>
                Clear filters
              </Button>
            </div>
          )}
        </section>
      </main>

      <footer className="room-footer">
        <span>Polder / Noord</span>
        <p role="status">
          {storageError
            ? "Your browser couldn’t save changes. They’ll stay available during this visit."
            : "Decisions and feedback are saved in this browser."}
        </p>
      </footer>

      <Dialog
        open={Boolean(selectedItem)}
        onClose={closeReview}
        dismissable
        lightDismiss={false}
        closeLabel="Dismiss review"
        className="review-dialog"
      >
        {selectedItem && (
          <div className="review-layout">
            <div className="review-image-panel">
              <img
                className="review-image"
                src={selectedItem.image}
                alt={selectedItem.alt}
                width={1500}
                height={1000}
              />
              <p className="image-caption">
                <span>{selectedItem.project}</span>
                <span>Photograph {selectedItem.id} of 06</span>
              </p>
            </div>

            <section className="review-details">
              <header className="review-heading">
                <p className="eyebrow">{selectedItem.project}</p>
                <DialogTitle as="h2" className="review-title">
                  {selectedItem.title}
                </DialogTitle>
                <StatusBadge status={selectedItem.status} />
              </header>

              {selectedItem.feedback && (
                <div className="saved-feedback">
                  <h3>Saved feedback</h3>
                  <p>{selectedItem.feedback}</p>
                </div>
              )}

              <div className="feedback-field">
                <Textarea
                  id="review-feedback"
                  label="Feedback"
                  rows={4}
                  placeholder="What would make this photograph work better?"
                  value={feedback}
                  aria-invalid={feedbackError || undefined}
                  aria-describedby={
                    feedbackError
                      ? "feedback-help feedback-error"
                      : "feedback-help"
                  }
                  onChange={(event) => {
                    setFeedback(event.target.value);
                    setConfirmation("");
                    if (event.target.value.trim()) setFeedbackError(false);
                  }}
                />
                <p id="feedback-help" className="field-help">
                  Be specific. Feedback is required when requesting changes.
                </p>
                {feedbackError && (
                  <p id="feedback-error" className="feedback-error" role="alert">
                    Please describe what needs to change before sending a request.
                  </p>
                )}
              </div>

              <div className="decision-actions">
                <Button type="button" onClick={() => saveDecision("Approved")}>
                  Approve
                </Button>
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => saveDecision("Changes requested")}
                >
                  Request changes
                </Button>
              </div>

              <p className="decision-confirmation" role="status" aria-atomic="true">
                {confirmation}
              </p>

              <div className="review-close-row">
                <Button type="button" variant="ghost" onClick={closeReview}>
                  Close review
                </Button>
                <span className="save-note" role="status">
                  {storageError ? "Browser storage unavailable" : "Saved in this browser"}
                </span>
              </div>
            </section>
          </div>
        )}
      </Dialog>
    </div>
  );
}