"use client";

import { useState, useEffect, useRef, useMemo } from "react";

interface Campaign {
  id: string;
  name: string;
  createdAt: string;
  status?: string;
}

interface CampaignPickerProps {
  value: string;
  onChange: (value: string) => void;
}

export function CampaignPicker({ value, onChange }: CampaignPickerProps) {
  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
  const [search, setSearch] = useState("");
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const containerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    fetch("/api/v1/campaigns")
      .then((r) => (r.ok ? r.json() : []))
      .then((data) => {
        setCampaigns(Array.isArray(data) ? data : []);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const filtered = useMemo(() => {
    if (!search) return campaigns;
    const lower = search.toLowerCase();
    return campaigns.filter((c) => c.name.toLowerCase().includes(lower));
  }, [campaigns, search]);

  const selectedCampaign = campaigns.find((c) => c.id === value);

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString("en-US", { month: "short", day: "numeric" });
  };

  const statusBadge = (status?: string) => {
    if (!status) return null;
    const colors: Record<string, string> = {
      PLANNING: "bg-gray-100 text-gray-600",
      ACTIVE: "bg-green-100 text-green-700",
      COMPLETED: "bg-blue-100 text-blue-700",
    };
    return (
      <span className={`text-[10px] px-1.5 py-0.5 rounded-full ${colors[status] ?? "bg-gray-100 text-gray-600"}`}>
        {status}
      </span>
    );
  };

  return (
    <div ref={containerRef} className="relative">
      <button
        type="button"
        onClick={() => {
          setOpen(!open);
          if (!open) {
            setSearch("");
            setTimeout(() => inputRef.current?.focus(), 50);
          }
        }}
        className="w-full rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-left text-gray-700 hover:border-gray-300 transition-colors flex items-center justify-between"
      >
        <span className={selectedCampaign ? "text-gray-900" : "text-gray-500"}>
          {selectedCampaign
            ? `${selectedCampaign.name} (${formatDate(selectedCampaign.createdAt)})`
            : "No campaign"}
        </span>
        <svg className="h-4 w-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {open && (
        <div className="absolute z-50 mt-1 w-full rounded-lg border border-gray-200 bg-white shadow-lg max-h-64 overflow-hidden">
          <div className="p-2 border-b border-gray-100">
            <input
              ref={inputRef}
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search campaigns..."
              className="w-full rounded-md border border-gray-200 px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-900"
            />
          </div>
          <div className="overflow-y-auto max-h-48">
            <button
              type="button"
              onClick={() => { onChange(""); setOpen(false); }}
              className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors ${!value ? "bg-gray-50 font-medium" : ""}`}
            >
              No campaign
            </button>
            {loading ? (
              <div className="px-3 py-2 text-sm text-gray-400">Loading...</div>
            ) : filtered.length === 0 ? (
              <div className="px-3 py-2 text-sm text-gray-400">
                {search ? "No matching campaigns" : "No campaigns created yet"}
              </div>
            ) : (
              filtered.map((c) => (
                <button
                  key={c.id}
                  type="button"
                  onClick={() => { onChange(c.id); setOpen(false); }}
                  className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors flex items-center justify-between gap-2 ${value === c.id ? "bg-gray-50 font-medium" : ""}`}
                >
                  <span className="truncate">{c.name}</span>
                  <span className="flex items-center gap-1.5 shrink-0">
                    {statusBadge(c.status)}
                    <span className="text-xs text-gray-400">{formatDate(c.createdAt)}</span>
                  </span>
                </button>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  );
}