"use client";

import { useState } from "react";
import { AISuggestionPreview } from "./AISuggestionPreview";
import type { Network } from "@/lib/types";

type AIAction = "shorten" | "professional" | "hashtags" | "translate" | "adapt";

const ACTIONS: { action: AIAction; label: string; icon: string }[] = [
  { action: "shorten", label: "Shorten", icon: "✂️" },
  { action: "professional", label: "Professional", icon: "💼" },
  { action: "hashtags", label: "Hashtags", icon: "#" },
  { action: "translate", label: "Translate", icon: "🌐" },
  { action: "adapt", label: "Adapt", icon: "🎯" },
];

type ContentTrack = "ENTERPRISE" | "PRODUCT" | "DEVELOPER" | "THOUGHT_LEADERSHIP" | "EVENT" | "TI_CULTURAL" | "GENERAL";

interface AIToolbarProps {
  content: string;
  networks: Network[];
  track?: ContentTrack | null;
  onAccept: (text: string) => void;
  children?: React.ReactNode;
}

export function AIToolbar({ content, networks, track, onAccept, children }: AIToolbarProps) {
  const [loading, setLoading] = useState<AIAction | null>(null);
  const [draftLoading, setDraftLoading] = useState(false);
  const [suggestion, setSuggestion] = useState<string | null>(null);
  const [originalSnap, setOriginalSnap] = useState("");
  const [error, setError] = useState("");

  /** Auto-hashtag known keywords (case-insensitive, longest match first) */
  const autoHashtag = (text: string): string => {
    const keywords = [
      { match: /\btidb cloud\b/gi, replace: "#tidbcloud" },
      { match: /\btidb serverless\b/gi, replace: "#tidbserverless" },
      { match: /\btidb\b/gi, replace: "#tidb" },
      { match: /\bdatabase\b/gi, replace: "#database" },
    ];
    let result = text;
    for (const { match, replace } of keywords) {
      // Don't re-hashtag already hashtagged words
      result = result.replace(match, (m) => {
        const idx = result.indexOf(m);
        if (idx > 0 && result[idx - 1] === "#") return m;
        return replace;
      });
    }
    return result;
  };

  const handleAction = async (action: AIAction) => {
    if (!content.trim()) return;

    // For hashtags action, apply keyword auto-hashtags first
    if (action === "hashtags") {
      const autoTagged = autoHashtag(content);
      if (autoTagged !== content) {
        setOriginalSnap(content);
        setSuggestion(autoTagged);
        return;
      }
    }

    setLoading(action);
    setError("");
    setSuggestion(null);
    setOriginalSnap(content);

    try {
      const res = await fetch("/api/v1/ai/rewrite", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          content,
          action,
          network: networks[0] ?? "TWITTER",
          language: "zh-CN",
        }),
      });

      if (res.status === 429) {
        setError("Try again in a moment");
        return;
      }

      const data = await res.json();

      if (!res.ok) {
        setError(data.error || "AI request failed");
        return;
      }

      if (data.suggestion) {
        setSuggestion(data.suggestion);
      } else if (data.error) {
        setError(data.error);
      }
    } catch {
      setError("Network error");
    } finally {
      setLoading(null);
    }
  };

  const handleGenerateDraft = async () => {
    setDraftLoading(true);
    setError("");
    setSuggestion(null);
    setOriginalSnap(content);

    try {
      const res = await fetch("/api/v1/ai/draft", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          content: content.trim() || undefined,
          track: track ?? "DEVELOPER",
          networks: networks.length > 0 ? networks : ["TWITTER"],
        }),
      });

      const data = await res.json();

      if (!res.ok) {
        setError(data.error || "AI draft unavailable, try again");
        return;
      }

      if (data.draft) {
        setSuggestion(data.draft);
      }
    } catch {
      setError("AI draft unavailable, try again");
    } finally {
      setDraftLoading(false);
    }
  };

  const handleAccept = (text: string) => {
    onAccept(text);
    setSuggestion(null);
  };

  const handleDismiss = () => {
    setSuggestion(null);
  };

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-1.5">
        <button
          type="button"
          disabled={draftLoading || loading !== null}
          onClick={handleGenerateDraft}
          className="inline-flex items-center gap-1 rounded-md border border-purple-200 bg-purple-50 px-2.5 py-2 sm:py-1 min-h-[44px] sm:min-h-0 text-xs font-medium text-purple-700 hover:bg-purple-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {draftLoading ? (
            <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-purple-300 border-t-purple-700" />
          ) : (
            <span>AI</span>
          )}
          <span className="hidden sm:inline">{draftLoading ? "Generating..." : "Generate Draft"}</span>
          <span className="sm:hidden">{draftLoading ? "..." : "Draft"}</span>
        </button>
        {ACTIONS.map(({ action, label, icon }) => (
          <button
            key={action}
            type="button"
            disabled={!content.trim() || loading !== null}
            onClick={() => handleAction(action)}
            className="inline-flex items-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 py-2 sm:py-1 min-h-[44px] sm:min-h-0 text-xs font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            <span>{icon}</span>
            <span className="hidden sm:inline">{loading === action ? "..." : label}</span>
          </button>
        ))}
        {children}
      </div>

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

      {suggestion && (
        <AISuggestionPreview
          original={originalSnap}
          suggestion={suggestion}
          onAccept={handleAccept}
          onDismiss={handleDismiss}
        />
      )}
    </div>
  );
}