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 Work = {
  id: string;
  title: string;
  project: string;
  image: string;
  alt: string;
  status: Status;
  feedback: string;
};

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

const INITIAL_WORK: Work[] = [
  {
    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 restoreWork(): Work[] {
  const defaults = INITIAL_WORK.map((item) => ({ ...item }));

  if (typeof window === "undefined") return defaults;

  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (raw === null) return defaults;

    const stored: unknown = JSON.parse(raw);
    if (!isRecord(stored)) return defaults;

    return defaults.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 defaults;
  }
}

function persistWork(items: Work[]): boolean {
  try {
    const saved: Record<string, Pick<Work, "status" | "feedback">> = {};

    for (const item of items) {
      saved[item.id] = {
        status: item.status,
        feedback: item.feedback,
      };
    }

    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(saved));
    return true;
  } catch {
    return false;
  }
}

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<Work[]>(restoreWork);
  const [search, setSearch] = useState("");
  const [filter, setFilter] = useState<Filter>("All");
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [reviewOpen, setReviewOpen] = useState(false);
  const [feedback, setFeedback] = useState("");
  const [feedbackInvalid, setFeedbackInvalid] = useState(false);
  const [message, setMessage] = useState("");
  const pendingFocusId = useRef<string | null>(null);

  const query = search.trim().toLowerCase();
  const approvedCount = items.filter(
    (item) => item.status === "Approved",
  ).length;
  const selectedItem = items.find((item) => item.id === selectedId);

  const visibleItems = items.filter((item) => {
    const matchesSearch =
      item.title.toLowerCase().includes(query) ||
      item.project.toLowerCase().includes(query);
    const matchesStatus = filter === "All" || item.status === filter;

    return matchesSearch && matchesStatus;
  });

  useEffect(() => {
    if (reviewOpen || pendingFocusId.current === null) return;

    document.getElementById(`review-${pendingFocusId.current}`)?.focus();
    pendingFocusId.current = null;
  }, [reviewOpen, filter]);

  function openReview(item: Work) {
    pendingFocusId.current = null;
    setSelectedId(item.id);
    setFeedback(item.feedback);
    setFeedbackInvalid(false);
    setMessage("");
    setReviewOpen(true);
  }

  function closeReview() {
    if (!reviewOpen) return;

    // Keep the opener available when an action changes its filtered status.
    if (
      selectedItem &&
      filter !== "All" &&
      selectedItem.status !== filter
    ) {
      setFilter("All");
    }

    pendingFocusId.current = selectedId;
    setReviewOpen(false);
  }

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

    const trimmedFeedback = feedback.trim();

    if (status === "Changes requested" && trimmedFeedback.length === 0) {
      setFeedbackInvalid(true);
      setMessage("Enter feedback before requesting changes.");
      return;
    }

    const nextItems = items.map((item) =>
      item.id === selectedItem.id
        ? { ...item, status, feedback: trimmedFeedback }
        : item,
    );

    const persisted = persistWork(nextItems);

    setItems(nextItems);
    setFeedback(trimmedFeedback);
    setFeedbackInvalid(false);

    const result =
      status === "Approved" ? "Photograph approved." : "Changes requested.";

    setMessage(
      persisted
        ? `${result} ${trimmedFeedback ? "Feedback saved." : "Review saved."}`
        : `${result} Changes are available for this session, but could not be saved on this device. Try the action again to retry saving.`,
    );
  }

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

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

      <section className="toolbar" aria-label="Find work">
        <div className="search-field">
          <Input
            id="search-work"
            type="search"
            aria-label="Search work"
            placeholder="Search work"
            value={search}
            onChange={(event) => setSearch(event.currentTarget.value)}
          />
        </div>

        <div className="status-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>
      </section>

      <section aria-label="Photographs">
        {visibleItems.length > 0 ? (
          <ul className="collection">
            {visibleItems.map((item) => (
              <li key={item.id}>
                <article
                  className="work-card"
                  aria-labelledby={`work-title-${item.id}`}
                >
                  <img
                    className="thumbnail"
                    src={item.image}
                    alt={item.alt}
                    width={1200}
                    height={900}
                  />
                  <h2 id={`work-title-${item.id}`}>{item.title}</h2>
                  <div className="work-meta">
                    <p>{item.project}</p>
                    <StatusBadge status={item.status} />
                  </div>
                  <Button
                    id={`review-${item.id}`}
                    type="button"
                    variant="ghost"
                    className="review-button"
                    aria-label={`Review ${item.title}`}
                    onClick={() => openReview(item)}
                  >
                    Review
                  </Button>
                </article>
              </li>
            ))}
          </ul>
        ) : (
          <div className="empty-state">
            <h2>No photographs match</h2>
            <p>Try another search or clear the filters to see all six photographs.</p>
            <Button type="button" variant="ghost" onClick={clearFilters}>
              Clear filters
            </Button>
          </div>
        )}
      </section>

      <Dialog
        open={reviewOpen}
        onClose={closeReview}
        dismissable
        lightDismiss
        closeLabel="Dismiss review"
        className="review-dialog"
      >
        {selectedItem && (
          <div className="review-layout">
            <div className="review-image-column">
              <img
                className="review-image"
                src={selectedItem.image}
                alt={selectedItem.alt}
              />
            </div>

            <div className="review-controls">
              <DialogTitle as="h2" className="review-title">
                {selectedItem.title}
              </DialogTitle>

              <p className="review-project">{selectedItem.project}</p>

              <div>
                <StatusBadge status={selectedItem.status} />
              </div>

              <section
                className="saved-feedback"
                aria-labelledby="saved-feedback-title"
              >
                <h3 id="saved-feedback-title">Saved feedback</h3>
                <p>
                  {selectedItem.feedback || "No feedback saved yet."}
                </p>
              </section>

              <div className="feedback-field">
                <Textarea
                  id="review-feedback"
                  label="Feedback"
                  aria-label="Feedback"
                  aria-invalid={feedbackInvalid}
                  aria-describedby={
                    feedbackInvalid ? "review-message" : undefined
                  }
                  rows={5}
                  value={feedback}
                  onChange={(event) => {
                    setFeedback(event.currentTarget.value);
                    setFeedbackInvalid(false);
                    setMessage("");
                  }}
                />
              </div>

              <div className="review-actions">
                <Button
                  type="button"
                  variant="primary"
                  onClick={() => saveReview("Approved")}
                >
                  Approve
                </Button>
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => saveReview("Changes requested")}
                >
                  Request changes
                </Button>
                <Button
                  type="button"
                  variant="ghost"
                  onClick={closeReview}
                >
                  Close review
                </Button>
              </div>

              <div
                id="review-message"
                className="review-message"
                role="status"
                aria-live="polite"
                aria-atomic="true"
              >
                {message && <p>{message}</p>}
              </div>
            </div>
          </div>
        )}
      </Dialog>
    </main>
  );
}