"use client";

import { useState, useRef, useEffect } from "react";
import { Search, Loader2, Sparkles, AlertCircle, ArrowRight, X } from "lucide-react";
import { runNaturalLanguageReport } from "@/lib/supabase/ai-actions";
import type { NLReportResult } from "@/lib/gemini";

interface NaturalLanguageReportsProps {
  className?: string;
}

interface HistoryEntry {
  id: string;
  query: string;
  result: NLReportResult;
  timestamp: Date;
}

export function NaturalLanguageReports({ className }: NaturalLanguageReportsProps) {
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [history, setHistory] = useState<HistoryEntry[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);

  const examples = [
    "How many employees are on leave this month?",
    "What's our total outstanding invoice amount?",
    "Show me payroll trends for the last 3 months",
    "Who hasn't taken any leave this year?",
  ];

  const handleSubmit = async (e?: React.FormEvent) => {
    e?.preventDefault();
    if (!query.trim() || loading) return;

    setLoading(true);
    setError(null);

    try {
      const response = await runNaturalLanguageReport(query.trim());

      if (!response.success) {
        if (response.blocked) {
          setError(`You've reached your free tier limit for AI queries (${response.current}/${response.limit}). Upgrade to Pro for unlimited access.`);
        } else {
          setError(response.error || "Query failed");
        }
        return;
      }

      if (response.result) {
        setHistory((prev) => [
          {
            id: Date.now().toString(),
            query: query.trim(),
            result: response.result!,
            timestamp: new Date(),
          },
          ...prev,
        ]);
      }
    } catch (e: any) {
      setError(e.message || "Query failed");
    } finally {
      setLoading(false);
      setQuery("");
    }
  };

  const handleExampleClick = (example: string) => {
    setQuery(example);
    inputRef.current?.focus();
  };

  const clearHistory = () => setHistory([]);

  return (
    <div className={`space-y-4 ${className || ""}`}>
      {/* Search input */}
      <form onSubmit={handleSubmit} className="relative">
        <div className="relative">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
          <input
            ref={inputRef}
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Ask about your business data..."
            className="w-full pl-12 pr-14 py-3.5 bg-white border border-gray-200 rounded-xl text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent shadow-sm"
            disabled={loading}
          />
          <button
            type="submit"
            disabled={loading || !query.trim()}
            className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-[#1D9E75] hover:bg-[#1a8b66] disabled:bg-gray-200 disabled:cursor-not-allowed text-white rounded-lg transition-colors cursor-pointer"
          >
            {loading ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <ArrowRight className="w-4 h-4" />
            )}
          </button>
        </div>
      </form>

      {/* Example queries */}
      {history.length === 0 && !loading && (
        <div className="space-y-2">
          <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Try asking</p>
          <div className="flex flex-wrap gap-2">
            {examples.map((ex) => (
              <button
                key={ex}
                onClick={() => handleExampleClick(ex)}
                className="px-3 py-1.5 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded-lg text-xs text-gray-600 transition-colors cursor-pointer"
              >
                {ex}
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Error */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-xl p-3 flex items-start gap-3">
          <AlertCircle className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
          <div className="flex-1">
            <p className="text-sm text-red-700">{error}</p>
          </div>
          <button onClick={() => setError(null)} className="text-red-400 hover:text-red-600 cursor-pointer">
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {/* History */}
      {history.length > 0 && (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Recent Queries</p>
            <button onClick={clearHistory} className="text-xs text-gray-400 hover:text-gray-600 cursor-pointer">
              Clear all
            </button>
          </div>
          {history.map((entry) => (
            <div key={entry.id} className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
              <div className="px-4 py-3 bg-gray-50 border-b border-gray-100 flex items-center gap-2">
                <Sparkles className="w-4 h-4 text-teal-600" />
                <p className="text-sm font-medium text-gray-900 flex-1">&ldquo;{entry.query}&rdquo;</p>
                <span className="text-[10px] text-gray-400">
                  {entry.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                </span>
              </div>
              <div className="px-4 py-3">
                <p className="text-sm text-gray-700 leading-relaxed">{entry.result.answer}</p>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Loading inline */}
      {loading && (
        <div className="bg-white border border-gray-200 rounded-xl p-6 flex items-center gap-3">
          <Loader2 className="w-5 h-5 animate-spin text-teal-600" />
          <p className="text-sm text-gray-500">Searching your data...</p>
        </div>
      )}
    </div>
  );
}