"use client";

import { useEffect, useState } from "react";
import type { MyTicket } from "@/types/ticket";
import { TICKET_STATUS_LABEL } from "@/lib/labels";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export function ManualCheckin({ eventId }: { eventId: number }) {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<MyTicket[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const [checkingInCode, setCheckingInCode] = useState<string | null>(null);
  const [feedback, setFeedback] = useState<{ success: boolean; message: string } | null>(null);
  const [searchError, setSearchError] = useState<string | null>(null);

  useEffect(() => {
    if (query.trim().length < 2) {
      return;
    }

    const timeout = setTimeout(async () => {
      setIsSearching(true);
      setSearchError(null);
      try {
        const res = await fetch(
          `/api/petugas/participants/search?event_id=${eventId}&q=${encodeURIComponent(query)}`,
        );
        const body = await res.json().catch(() => null);
        if (res.ok) setResults(body?.data ?? []);
      } catch {
        setSearchError("Unable to reach the server. Please check your connection.");
      } finally {
        setIsSearching(false);
      }
    }, 400);

    return () => clearTimeout(timeout);
  }, [query, eventId]);

  async function handleCheckin(ticketCode: string) {
    setFeedback(null);
    setCheckingInCode(ticketCode);

    try {
      const res = await fetch("/api/petugas/checkin/manual", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ event_id: eventId, ticket_code: ticketCode }),
      });

      const body = await res.json().catch(() => null);
      setFeedback({ success: res.ok, message: body?.message ?? "An error occurred." });

      if (res.ok) {
        setResults((prev) =>
          prev.map((t) => (t.ticket_code === ticketCode ? { ...t, status: "checked_in" } : t)),
        );
      }
    } catch {
      setFeedback({ success: false, message: "Unable to reach the server. Please check your connection and try again." });
    } finally {
      setCheckingInCode(null);
    }
  }

  return (
    <div>
      <Input
        value={query}
        onChange={(e) => {
          const value = e.target.value;
          setQuery(value);
          if (value.trim().length < 2) setResults([]);
        }}
        placeholder="Search by name, email, or ticket code..."
        className="w-full"
      />

      {feedback && (
        <p className={`mt-3 text-sm ${feedback.success ? "text-green-600" : "text-red-600"}`}>
          {feedback.message}
        </p>
      )}
      {searchError && <p className="mt-3 text-sm text-red-600">{searchError}</p>}

      {isSearching && <p className="mt-3 text-sm text-kolabora-neutral-dark/70">Searching...</p>}

      <div className="mt-3 flex flex-col divide-y divide-kolabora-neutral-dark/10 rounded-xl border border-kolabora-neutral-dark/10">
        {query.trim().length >= 2 && !isSearching && results.length === 0 && (
          <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">
            No participants found.
          </p>
        )}
        {results.map((ticket) => (
          <div key={ticket.id} className="flex items-center justify-between gap-3 px-4 py-3">
            <div className="min-w-0">
              <p className="font-medium truncate">
                {ticket.holder_name}
                {ticket.companion_name && <> + {ticket.companion_name}</>}
              </p>
              <p className="font-mono text-xs text-kolabora-neutral-dark/70">{ticket.ticket_code}</p>
              <p className="text-xs text-kolabora-neutral-dark/70">
                {TICKET_STATUS_LABEL[ticket.status] ?? ticket.status}
              </p>
            </div>
            <Button
              type="button"
              disabled={ticket.status !== "paid" || checkingInCode === ticket.ticket_code}
              onClick={() => handleCheckin(ticket.ticket_code)}
              className="shrink-0"
            >
              {checkingInCode === ticket.ticket_code ? "..." : "Check-in"}
            </Button>
          </div>
        ))}
      </div>
    </div>
  );
}