"use client";

import { useState } from "react";
import { Link2, Loader2, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import type { ContentTrack } from "@/lib/types";

interface ImportResult {
  title: string;
  summary: string;
  sourceUrl: string;
  suggestedTrack?: ContentTrack;
  draftVariants: string[];
  ogImage?: string;
}

interface UrlImportPanelProps {
  open: boolean;
  onClose: () => void;
  onInsert: (text: string) => void;
  onTrackSuggest: (track: ContentTrack) => void;
  onImageFound?: (imageUrl: string) => void;
}

export function UrlImportPanel({ open, onClose, onInsert, onTrackSuggest, onImageFound }: UrlImportPanelProps) {
  const [url, setUrl] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [result, setResult] = useState<ImportResult | null>(null);

  if (!open) return null;

  const handleFetch = async () => {
    const trimmed = url.trim();
    if (!trimmed) return;
    setLoading(true);
    setError("");
    setResult(null);

    try {
      const res = await fetch("/api/v1/import/url", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url: trimmed }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error ?? "Failed to fetch URL content");
        return;
      }
      setResult(data);

      // Auto-suggest track from imported content
      if (data.suggestedTrack) {
        onTrackSuggest(data.suggestedTrack);
      }
      // Pass og:image to compose for media box
      if (data.ogImage && onImageFound) {
        onImageFound(data.ogImage);
      }
    } catch {
      setError("Could not fetch content from this URL. Try a direct link to the page.");
    } finally {
      setLoading(false);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !loading) {
      e.preventDefault();
      handleFetch();
    }
  };

  const handleDismiss = () => {
    setUrl("");
    setError("");
    setResult(null);
    onClose();
  };

  const handleInsertVariant = (text: string) => {
    onInsert(text);
    handleDismiss();
  };

  const variantLabels = ["Short", "With summary", "With hashtags"];

  return (
    <div className="rounded-lg border border-blue-200 bg-blue-50/50 p-3 sm:p-4 space-y-3 overflow-hidden">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2 text-sm font-medium text-blue-800">
          <Link2 className="h-4 w-4" />
          Import from URL
        </div>
        <button type="button" onClick={handleDismiss} className="text-gray-400 hover:text-gray-600">
          <X className="h-4 w-4" />
        </button>
      </div>

      <div className="flex flex-col sm:flex-row gap-2">
        <Input
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="Paste a GitHub PR, blog post, or docs URL..."
          className="flex-1 bg-white text-sm min-h-[44px] sm:min-h-0"
          disabled={loading}
        />
        <Button
          onClick={handleFetch}
          disabled={!url.trim() || loading}
          size="sm"
          className="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 min-h-[44px] sm:min-h-0 w-full sm:w-auto"
        >
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Fetch"}
        </Button>
      </div>

      {error && (
        <p className="text-sm text-red-600">{error}</p>
      )}

      {result && (
        <div className="space-y-3">
          <div className="rounded-lg border border-gray-200 bg-white p-3 space-y-2">
            {result.ogImage && (
              <img src={result.ogImage} alt="" className="w-full h-32 object-cover rounded-md" />
            )}
            <p className="text-sm font-medium text-gray-900 line-clamp-2">{result.title}</p>
            {result.summary && (
              <p className="text-xs text-gray-500 line-clamp-3">{result.summary}</p>
            )}
          </div>

          <div className="space-y-1.5">
            <p className="text-xs font-medium text-gray-500">Choose a draft variant:</p>
            <div className="flex flex-wrap gap-2">
              {result.draftVariants.map((variant, i) => (
                <button
                  key={i}
                  type="button"
                  onClick={() => handleInsertVariant(variant)}
                  className="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2.5 sm:py-2 min-h-[44px] sm:min-h-0 text-xs text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors text-left w-full sm:w-auto"
                >
                  <span className="font-medium text-blue-600 shrink-0">{variantLabels[i] ?? `Variant ${i + 1}`}</span>
                  <span className="truncate">{variant.slice(0, 80)}{variant.length > 80 ? "..." : ""}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}