"use client";

import PageHeading from "./ui/PageHeading";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { authFetch, getApiBase, getToken, clearToken, getEventStreamToken } from "./lib/auth";
import {
  normalizeRecentResults,
  normalizeSearchResults,
  type RecentRequest,
  type RequestSearchResult,
} from "./lib/request-results";
import RequestStageFilter, { type RequestStage } from "./ui/RequestStageFilter";

export default function HomePage() {
  const router = useRouter();
  const [query, setQuery] = useState("");
  const [recent, setRecent] = useState<RecentRequest[]>([]);
  const [recentError, setRecentError] = useState<string | null>(null);
  const [recentLoading, setRecentLoading] = useState(false);
  const [searchResults, setSearchResults] = useState<RequestSearchResult[]>([]);
  const [searchError, setSearchError] = useState<string | null>(null);
  const [role, setRole] = useState<string | null>(null);
  const [recentDays, setRecentDays] = useState(90);
  const [recentStage, setRecentStage] = useState<RequestStage>("all");
  const [authReady, setAuthReady] = useState(false);

  const submit = (event: React.FormEvent) => {
    event.preventDefault();
    const trimmed = query.trim();
    if (!trimmed) return;
    if (/^\d+$/.test(trimmed)) {
      router.push(`/requests/${encodeURIComponent(trimmed)}`);
      return;
    }
    void runSearch(trimmed);
  };

  useEffect(() => {
    if (!getToken()) {
      router.push("/login");
      return;
    }
    let cancelled = false;
    const load = async () => {
      setRecentLoading(true);
      setRecentError(null);
      try {
        const baseUrl = getApiBase();
        const meResponse = await authFetch(`${baseUrl}/auth/me`);
        if (!meResponse.ok) {
          if (meResponse.status === 401) {
            clearToken();
            router.push("/login");
            return;
          }
          throw new Error(`Auth failed: ${meResponse.status}`);
        }
        const me = await meResponse.json();
        if (cancelled) return;
        const userRole = me?.role ?? null;
        setRole(userRole);
        setAuthReady(true);
        const take = userRole === "admin" ? 50 : 6;
        const params = new URLSearchParams({
          take: String(take),
          days: String(recentDays),
        });
        if (recentStage !== "all") {
          params.set("stage", recentStage);
        }
        const response = await authFetch(`${baseUrl}/requests/recent?${params.toString()}`);
        if (!response.ok) {
          if (response.status === 401) {
            clearToken();
            router.push("/login");
            return;
          }
          throw new Error(`Recent requests failed: ${response.status}`);
        }
        const data = await response.json();
        if (cancelled) return;
        if (Array.isArray(data?.results)) {
          setRecent(normalizeRecentResults(data.results));
        }
      } catch (error) {
        console.error(error);
        if (!cancelled) setRecentError("Recent requests are not available right now.");
      } finally {
        if (!cancelled) setRecentLoading(false);
      }
    };

    void load();
    return () => {
      cancelled = true;
    };
  }, [recentDays, recentStage, router]);

  useEffect(() => {
    if (!authReady) {
      return;
    }
    if (!getToken()) {
      return;
    }
    const baseUrl = getApiBase();
    let closed = false;
    let source: EventSource | null = null;

    const connect = async () => {
      try {
        const streamToken = await getEventStreamToken();
        if (closed) return;
        const params = new URLSearchParams({
          stream_token: streamToken,
          recent_days: String(recentDays),
        });
        if (recentStage !== "all") {
          params.set("recent_stage", recentStage);
        }
        const streamUrl = `${baseUrl}/events/stream?${params.toString()}`;
        source = new EventSource(streamUrl);

        source.onmessage = (event) => {
          if (closed) return;
          try {
            const payload = JSON.parse(event.data);
            if (!payload || typeof payload !== "object") {
              return;
            }
            if (payload.type === "home_recent") {
              if (Array.isArray(payload.results)) {
                setRecent(normalizeRecentResults(payload.results));
                setRecentError(null);
                setRecentLoading(false);
              } else if (typeof payload.error === "string" && payload.error.trim()) {
                setRecentError("Recent requests are not available right now.");
                setRecentLoading(false);
              }
              return;
            }
          } catch (error) {
            console.error(error);
          }
        };
      } catch (error) {
        if (closed) return;
        console.error(error);
      }
    };

    void connect();

    return () => {
      closed = true;
      source?.close();
    };
  }, [authReady, recentDays, recentStage]);

  const runSearch = async (term: string) => {
    try {
      const baseUrl = getApiBase();
      const response = await authFetch(`${baseUrl}/requests/search?query=${encodeURIComponent(term)}`);
      if (!response.ok) {
        if (response.status === 401) {
          clearToken();
          router.push("/login");
          return;
        }
        throw new Error(`Search failed: ${response.status}`);
      }
      const data = await response.json();
      if (Array.isArray(data?.results)) {
        setSearchResults(normalizeSearchResults(data.results));
        setSearchError(null);
      }
    } catch (error) {
      console.error(error);
      setSearchError("Search failed. Try a request ID instead.");
      setSearchResults([]);
    }
  };

  const resolveArtworkUrl = (url?: string | null) => {
    if (!url) return null;
    return url.startsWith("http") ? url : `${getApiBase()}${url}`;
  };

  const formatRequestTime = (value?: string | null) => {
    if (!value) return null;
    const date = new Date(value);
    if (Number.isNaN(date.valueOf())) return value;
    return date.toLocaleString();
  };

  const activeRecentCount = recent.filter((item) => {
    const label = String(item.statusLabel ?? "").toLowerCase();
    return !label.includes("ready") && !label.includes("available") && !label.includes("declined");
  }).length;
  const readyRecentCount = recent.filter((item) => {
    const label = String(item.statusLabel ?? "").toLowerCase();
    return label.includes("ready") || label.includes("available");
  }).length;

  const requestCardState = (value?: string) => {
    const label = String(value ?? "").toLowerCase();
    if (label.includes("partial")) return { key: "attention", label: value || "Partially ready", progress: 65 };
    if (!/not |unavailable|waiting/.test(label) && (label.includes("ready") || label.includes("available")))
      return { key: "ready", label: value || "Ready", progress: 100 };
    if (label.includes("declined") || label.includes("failed") || label.includes("error"))
      return { key: "attention", label: value || "Needs attention", progress: 12 };
    if (label.includes("working") || label.includes("progress") || label.includes("download"))
      return { key: "processing", label: value || "In progress", progress: 58 };
    return { key: "waiting", label: value || "Waiting", progress: 4 };
  };

  return (
    <main className="card home-page">
      <PageHeading
        title="My requests"
        description="Follow your requests from collection to ready to watch."
        actions={
          <form onSubmit={submit} className="home-search">
            <label htmlFor="request-search">Title, year, or request number</label>
            <div className="home-search-row">
              <input
                id="request-search"
                value={query}
                onChange={(event) => setQuery(event.target.value)}
                placeholder="Dune 2021 or 1289"
              />
              <button type="submit">Find request</button>
            </div>
          </form>
        }
      />

      {(searchError || searchResults.length > 0) && (
        <section className="home-search-results" aria-live="polite">
          <div className="home-section-heading">
            <div>
              <span className="section-kicker">Search results</span>
              <h2>
                {searchError
                  ? "Search unavailable"
                  : `${searchResults.length} match${searchResults.length === 1 ? "" : "es"} found`}
              </h2>
            </div>
            <button
              type="button"
              className="ghost-button"
              onClick={() => {
                setSearchResults([]);
                setSearchError(null);
              }}
            >
              Clear
            </button>
          </div>
          {searchError ? (
            <div className="error-banner">{searchError}</div>
          ) : (
            <div className="home-result-grid">
              {searchResults.map((item, index) => (
                <button
                  key={`${item.title || "Untitled"}-${index}`}
                  type="button"
                  className="home-result-card"
                  disabled={!item.requestId}
                  onClick={() => item.requestId && router.push(`/requests/${item.requestId}`)}
                >
                  <span>
                    <strong>
                      {item.title || "Untitled"}
                      {item.year ? ` (${item.year})` : ""}
                    </strong>
                    <small>{item.type?.toUpperCase() || "MEDIA"}</small>
                  </span>
                  <span>{!item.requestId ? "Not requested" : item.statusLabel || "Already requested"}</span>
                </button>
              ))}
            </div>
          )}
        </section>
      )}

      <section className="home-metric-strip" aria-label="Request summary">
        <div>
          <span>In view</span>
          <strong>{recent.length}</strong>
        </div>
        <div>
          <span>In progress</span>
          <strong>{activeRecentCount}</strong>
        </div>
        <div>
          <span>Ready</span>
          <strong>{readyRecentCount}</strong>
        </div>
      </section>

      <section className="recent home-recent">
        <div className="recent-header home-section-heading">
          <div>
            <span className="section-kicker">Request activity</span>
            <h2>{role === "admin" ? "Recent requests" : "My recent requests"}</h2>
          </div>
          {authReady && (
            <div className="recent-filter-group">
              <label className="recent-filter">
                <span>Period</span>
                <select value={recentDays} onChange={(event) => setRecentDays(Number(event.target.value))}>
                  <option value={0}>All time</option>
                  <option value={30}>30 days</option>
                  <option value={60}>60 days</option>
                  <option value={90}>90 days</option>
                  <option value={180}>180 days</option>
                </select>
              </label>
            </div>
          )}
        </div>
        {authReady && <RequestStageFilter value={recentStage} onChange={setRecentStage} />}
        <div className="recent-grid home-recent-grid">
          {recentLoading ? (
            <div className="loading-center">
              <div className="spinner" aria-hidden="true" />
              <span className="loading-text">Loading recent requests...</span>
            </div>
          ) : recentError ? (
            <div className="error-banner">{recentError}</div>
          ) : recent.length === 0 ? (
            <div className="home-empty-state">
              <strong>No requests match these filters</strong>
              <span>Try a wider period or a different stage.</span>
            </div>
          ) : (
            recent.map((item) => (
              <button
                key={item.id}
                type="button"
                onClick={() => router.push(`/requests/${item.id}`)}
                className={`recent-card is-${requestCardState(item.statusLabel).key}`}
              >
                {item.artwork?.poster_url ? (
                  <img
                    className="recent-poster"
                    src={resolveArtworkUrl(item.artwork.poster_url) ?? ""}
                    alt=""
                    loading="lazy"
                  />
                ) : (
                  <span className="recent-poster recent-poster-placeholder" aria-hidden="true">
                    #{item.id}
                  </span>
                )}
                <span className="recent-info">
                  <span className="recent-title">
                    {item.title || "Untitled"}
                    {item.year ? ` (${item.year})` : ""}
                  </span>
                  <span className="recent-status-badge">
                    <span aria-hidden="true">
                      {
                        { ready: "✓", processing: "↻", attention: "!", waiting: "◷" }[
                          requestCardState(item.statusLabel).key
                        ]
                      }
                    </span>
                    {item.statusLabel || "Status not available yet"}
                  </span>
                  <span className="recent-meta">
                    Request {item.id}
                    {item.createdAt ? ` · ${formatRequestTime(item.createdAt)}` : ""}
                  </span>
                </span>
                <span className="recent-open-cue" aria-hidden="true">
                  Open
                </span>
              </button>
            ))
          )}
        </div>
      </section>
    </main>
  );
}