"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { AdminCard } from "@/components/admin/design-system";
import { setAIProviderSettings } from "@/actions/integrations/ai-providers";

// ── Header Icon Component ─────────────────────────────────────────────────────

function AIHeaderIcon() {
  return (
    <div 
      className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl"
      style={{
        background: 'linear-gradient(135deg, rgba(202, 117, 67, 0.15) 0%, rgba(202, 117, 67, 0.08) 100%)',
        border: '1px solid rgba(202, 117, 67, 0.2)',
      }}
    >
      <svg className="h-6 w-6" style={{ color: '#8c4c27' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z" />
      </svg>
    </div>
  );
}

// ── Tool Card Component ───────────────────────────────────────────────────────

type ToolCardProps = {
  tool: AITool;
  isConnected: boolean;
  onOpen: (tool: AITool) => void;
};

function ToolCard({ tool, isConnected, onOpen }: ToolCardProps) {
  const isReady = tool.status === "available" && isConnected;
  
  return (
    <AdminCard className="p-5">
      <div className="flex items-start gap-4">
        <span className="text-2xl">{tool.icon}</span>
        <div className="flex-1 min-w-0">
          <div className="flex flex-wrap items-center gap-2 mb-1">
            <h3 className="text-base font-semibold" style={{ color: 'var(--admin-text-primary)' }}>{tool.title}</h3>
            {tool.badge && (
              <span 
                className="text-xs font-medium rounded-full px-2.5 py-0.5"
                style={{ 
                  background: 'rgba(202, 117, 67, 0.1)', 
                  color: '#8c4c27',
                  border: '1px solid rgba(202, 117, 67, 0.2)',
                }}
              >
                {tool.badge}
              </span>
            )}
            {tool.status === "available" && (
              <span 
                className="text-xs font-medium rounded-full px-2.5 py-0.5"
                style={{ 
                  background: isConnected ? 'rgba(16, 185, 129, 0.1)' : 'rgba(0, 0, 0, 0.04)', 
                  color: isConnected ? '#047857' : 'rgba(0, 0, 0, 0.4)',
                  border: isConnected ? '1px solid rgba(16, 185, 129, 0.2)' : '1px solid rgba(0, 0, 0, 0.06)',
                }}
              >
                {isConnected ? "Ready" : "Disabled"}
              </span>
            )}
            {tool.status === "experimental" && (
              <span 
                className="text-xs font-medium rounded-full px-2.5 py-0.5"
                style={{ 
                  background: 'rgba(171, 162, 120, 0.15)', 
                  color: '#92781e',
                  border: '1px solid rgba(171, 162, 120, 0.2)',
                }}
              >
                Experimental
              </span>
            )}
            {tool.status === "coming_soon" && (
              <span 
                className="text-xs font-medium rounded-full px-2.5 py-0.5"
                style={{ 
                  background: 'rgba(0, 0, 0, 0.04)', 
                  color: 'rgba(0, 0, 0, 0.4)',
                  border: '1px solid rgba(0, 0, 0, 0.06)',
                }}
              >
                Coming Soon
              </span>
            )}
          </div>
          <span className="text-xs font-medium" style={{ color: 'var(--admin-text-muted)' }}>{tool.module}</span>
          <p className="mt-2 text-sm" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.5 }}>{tool.description}</p>
        </div>
      </div>
      <div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--admin-border-light)' }}>
        {tool.status === "available" && (
          <button type="button"
            onClick={() => isConnected && onOpen(tool)}
            disabled={!isConnected}
            className="w-full rounded-xl px-4 py-2.5 text-sm font-semibold transition-all"
            style={{
              background: isConnected 
                ? 'linear-gradient(135deg, #ca7543 0%, #d4865a 100%)' 
                : 'rgba(0, 0, 0, 0.04)',
              color: isConnected ? 'white' : 'rgba(0, 0, 0, 0.4)',
              boxShadow: isConnected ? '0 2px 8px rgba(202, 117, 67, 0.25)' : 'none',
            }}
            title={!isConnected ? "Add your OpenAI API key in Settings to enable" : "Open tool"}
          >
            Open Tool
          </button>
        )}
        {tool.status === "coming_soon" && (
          <button type="button" disabled className="w-full rounded-xl px-4 py-2.5 text-sm font-semibold cursor-not-allowed"
            style={{ 
              background: 'rgba(0, 0, 0, 0.04)', 
              color: 'rgba(0, 0, 0, 0.4)',
            }}>
            Coming Soon
          </button>
        )}
        {tool.status === "experimental" && (
          <button type="button" disabled className="w-full rounded-xl px-4 py-2.5 text-sm font-semibold cursor-not-allowed"
            style={{ 
              background: 'rgba(171, 162, 120, 0.15)', 
              color: '#92781e',
            }}>
            Request Access
          </button>
        )}
      </div>
    </AdminCard>
  );
}

// ── Connection Status Banner ───────────────────────────────────────────────────

function ConnectionStatusBanner({ isConnected, availableCount, onConfigure }: { 
  isConnected: boolean; 
  availableCount: number;
  onConfigure: () => void;
}) {
  if (isConnected) {
    return (
      <AdminCard className="p-5 mb-6" style={{ 
        background: 'rgba(16, 185, 129, 0.08)',
        border: '1px solid rgba(16, 185, 129, 0.2)',
      }}>
        <div className="flex items-center gap-4">
          <div 
            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
            style={{ background: 'rgba(16, 185, 129, 0.15)' }}
          >
            <svg className="h-5 w-5" style={{ color: '#047857' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <div className="flex-1">
            <p className="font-semibold" style={{ color: '#047857' }}>AI Connected</p>
            <p className="text-sm" style={{ color: '#059669' }}>{availableCount} tool{availableCount !== 1 ? "s" : ""} ready to use</p>
          </div>
          <span 
            className="text-xs font-medium rounded-full px-3 py-1"
            style={{ 
              background: 'rgba(16, 185, 129, 0.15)', 
              color: '#047857',
              border: '1px solid rgba(16, 185, 129, 0.2)',
            }}
          >
            Active
          </span>
        </div>
      </AdminCard>
    );
  }

  return (
    <AdminCard className="p-5 mb-6" style={{ 
      background: 'rgba(171, 162, 120, 0.08)',
      border: '1px solid rgba(171, 162, 120, 0.2)',
    }}>
      <div className="flex items-center gap-4">
        <div 
          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
          style={{ background: 'rgba(171, 162, 120, 0.15)' }}
        >
          <svg className="h-5 w-5" style={{ color: '#92781e' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div className="flex-1">
          <p className="font-semibold" style={{ color: '#92781e' }}>AI Not Configured</p>
          <p className="text-sm" style={{ color: '#a6953f' }}>Add your API key to enable AI tools.</p>
        </div>
        <button type="button"
          onClick={onConfigure}
          className="rounded-xl px-4 py-2 text-sm font-bold transition-all"
          style={{
            background: 'linear-gradient(135deg, #ca7543 0%, #d4865a 100%)',
            color: 'white',
            boxShadow: '0 2px 8px rgba(202, 117, 67, 0.25)',
          }}
        >
          Add API Key
        </button>
      </div>
    </AdminCard>
  );
}

type ToolStatus = "available" | "coming_soon" | "experimental";

type AITool = {
  id: string;
  title: string;
  description: string;
  icon: string;
  module: string;
  status: ToolStatus;
  badge?: string;
};

const AI_TOOLS: AITool[] = [
  {
    id: "campaign-writer",
    title: "Campaign Idea Generator",
    description: "Generate email campaign topics, angles, and subject lines based on your products, season, and customer segments.",
    icon: "📧",
    module: "Harvest Reach",
    status: "available",
    badge: "New",
  },
  {
    id: "product-writer",
    title: "Product Description Writer",
    description: "AI-assisted product descriptions, pricing analysis, and image alt-text generation for your catalog.",
    icon: "🛒",
    module: "Products",
    status: "available",
  },
  {
    id: "route-suggester",
    title: "Route Optimizer",
    description: "Get AI-powered suggestions for stop ordering, grouping, and delivery sequence to minimize drive time.",
    icon: "🗺️",
    module: "Stops & Routes",
    status: "available",
  },
  {
    id: "customer-insights",
    title: "Customer Insights",
    description: "Natural language queries across orders and customers. Ask 'Which customers haven't ordered in 30 days?' or 'What products are trending this month?'",
    icon: "🔍",
    module: "Reports",
    status: "available",
  },
  {
    id: "stop-blast-advisor",
    title: "Stop Blast Advisor",
    description: "AI suggestions for timing, content, and audience targeting for operational stop blast messages.",
    icon: "📢",
    module: "Harvest Reach",
    status: "available",
  },
  {
    id: "pricing-advisor",
    title: "Pricing Advisor",
    description: "Analyze demand, seasonality, and historical sales to suggest optimal product prices for your market.",
    icon: "💰",
    module: "Products",
    status: "available",
  },
  {
    id: "report-explainer",
    title: "Report Explainer",
    description: "Plain-English summaries of complex reports. Just ask 'why did sales drop this week?' and get an AI-generated breakdown.",
    icon: "📊",
    module: "Reports",
    status: "available",
  },
  {
    id: "demand-forecast",
    title: "Demand Forecasting",
    description: "Predict order volumes and popular products for upcoming stops based on historical trends and seasonal patterns.",
    icon: "📈",
    module: "Orders",
    status: "available",
  },
];

type Provider = "openai" | "anthropic" | "google" | "xai" | "custom";

type Props = {
  isConnected: boolean;
  brandId: string;
  brandName: string;
  provider?: Provider;
  model?: string;
  customEndpoint?: string;
};

// ── Provider Selector ─────────────────────────────────────────────────────────

type ProviderOption = {
  id: Provider;
  name: string;
  icon: string;
  description: string;
};

const PROVIDERS: ProviderOption[] = [
  { id: "openai", name: "OpenAI", icon: "💩", description: "GPT-4, GPT-4o, o1" },
  { id: "anthropic", name: "Anthropic", icon: "🧠", description: "Claude 3.5 Sonnet, Opus" },
  { id: "google", name: "Google", icon: "🔴", description: "Gemini 2.0 Flash, Pro" },
  { id: "xai", name: "xAI", icon: "⚡", description: "Grok-2, Grok-1.5" },
  { id: "custom", name: "Custom", icon: "🔧", description: "Bring your own endpoint" },
];

// ── Model Input ───────────────────────────────────────────────────────────────

function ModelInput({
  currentModel,
  brandId,
  onChange
}: {
  currentModel: string;
  brandId: string;
  onChange: (model: string) => void;
}) {
  // Uncontrolled input: the editable buffer is the DOM input itself.
  // The parent uses `key={currentModel}` so that when the prop changes
  // externally, this component fully remounts and `defaultValue` is
  // re-applied from the new prop — no stale copy.
  const inputRef = useRef<HTMLInputElement>(null);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSave = async () => {
    const value = inputRef.current?.value ?? "";
    if (!value.trim()) return;
    setSaving(true);
    setError(null);

    const result = await setAIProviderSettings(brandId, { model: value.trim() });
    if (result.success) {
      onChange(value.trim());
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } else {
      setError(result.error ?? "Failed to save");
    }
    setSaving(false);
  };

  return (
    <AdminCard className="p-5 mb-6">
      <div className="flex items-center gap-2 mb-3">
        <span className="text-lg">🤖</span>
        <h2 className="text-sm font-semibold" style={{ color: 'var(--admin-text-primary)' }}>
          Model
        </h2>
      </div>
      <div className="flex gap-3">
        <input aria-label="., Gpt 4o, Claude 3 5 Sonnet 20241002"
          ref={inputRef}
          type="text"
          defaultValue={currentModel}
          key={currentModel}
          placeholder="e.g., gpt-4o, claude-3-5-sonnet-20241002"
          className="flex-1 px-4 py-2.5 rounded-xl text-sm"
          style={{
            border: '1px solid var(--admin-border)',
            backgroundColor: 'var(--admin-card-bg)',
            color: 'var(--admin-text-primary)',
          }}
        />
        <button type="button"
          onClick={handleSave}
          disabled={saving}
          className="px-5 py-2.5 rounded-xl text-sm font-semibold text-white transition-all"
          style={{
            background: 'linear-gradient(135deg, #ca7543 0%, #d4865a 100%)',
            boxShadow: '0 2px 8px rgba(202, 117, 67, 0.25)',
            opacity: saving ? 0.5 : 1,
            cursor: saving ? 'not-allowed' : 'pointer',
          }}
        >
          {saving ? "..." : saved ? "✓" : "Save"}
        </button>
      </div>
      <p className="text-xs mt-2" style={{ color: 'var(--admin-danger)' }}>
        ⚠️ Model ID must be exact — check the provider&apos;s documentation for the correct identifier.
      </p>
      {error && <p className="text-xs mt-2" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
    </AdminCard>
  );
}

// ── Provider Selector Component ─────────────────────────────────────────────

function ProviderSelector({ 
  currentProvider, 
  currentModel, 
  brandId,
  onSelect 
}: { 
  currentProvider: Provider;
  currentModel: string;
  brandId: string;
  onSelect: (provider: Provider) => void;
}) {
  const handleSelect = async (provider: Provider) => {
    onSelect(provider);
    await setAIProviderSettings(brandId, { provider });
  };

  return (
    <div className="mb-6">
      <div className="flex items-center gap-2 mb-3">
        <span className="text-lg">💩</span>
        <h2 className="text-sm font-semibold" style={{ color: 'var(--admin-text-primary)' }}>
          AI Provider
        </h2>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        {PROVIDERS.map((provider) => (
          <button type="button"
            key={provider.id}
            onClick={() => handleSelect(provider.id)}
            className="p-4 rounded-xl text-center transition-all"
            style={{
              background: currentProvider === provider.id 
                ? 'rgba(202, 117, 67, 0.1)' 
                : 'rgba(0, 0, 0, 0.02)',
              border: currentProvider === provider.id 
                ? '2px solid var(--admin-accent)' 
                : '1px solid var(--admin-border)',
            }}
          >
            <span className="text-3xl block mb-2">{provider.icon}</span>
            <span className="text-sm font-semibold block" style={{ color: 'var(--admin-text-primary)' }}>
              {provider.name}
            </span>
            <span className="text-xs block mt-1" style={{ color: 'var(--admin-text-muted)' }}>
              {provider.description}
            </span>
          </button>
        ))}
      </div>
      <p className="text-xs mt-3" style={{ color: 'var(--admin-text-muted)' }}>
        Current model: <span className="font-medium" style={{ color: 'var(--admin-text-secondary)' }}>{currentModel}</span>
      </p>
    </div>
  );
}

// ── Form Input Styles (Shared) ────────────────────────────────────────────────

const inputBaseClass = "w-full rounded-xl px-4 py-2.5 text-sm outline-none transition-colors";
const inputStyle = {
  border: '1px solid var(--admin-border)',
  backgroundColor: 'var(--admin-card-bg)',
  color: 'var(--admin-text-primary)',
};
const inputFocusStyle = {
  borderColor: 'var(--admin-accent)',
  boxShadow: '0 0 0 3px rgba(202, 117, 67, 0.1)',
};

const textareaStyle = { ...inputStyle };
const textareaFocusStyle = { ...inputFocusStyle };

const btnPrimaryClass = "rounded-xl px-5 py-2.5 text-sm font-bold text-white transition-all";
const btnPrimaryStyle = {
  background: 'linear-gradient(135deg, #ca7543 0%, #d4865a 100%)',
  boxShadow: '0 2px 8px rgba(202, 117, 67, 0.25)',
};

const labelStyle = {
  display: 'block',
  fontSize: '0.875rem',
  fontWeight: 500,
  marginBottom: '0.25rem',
  color: 'var(--admin-text-primary)',
};

// ── Campaign Writer Tool ──────────────────────────────────────────────────────

function CampaignWriterTool({ brandId, brandName }: { brandId: string; brandName: string }) {
  const [topic, setTopic] = useState("");
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState<{ angle: string; subject: string; body: string }[]>([]);
  const [error, setError] = useState<string | null>(null);

  async function handleGenerate() {
    if (!topic.trim()) return;
    setLoading(true);
    setError(null);
    setResults([]);

    try {
      const res = await fetch("/api/ai/campaign-writer", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ topic, brandId, brandName }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Generation failed");
      setResults(data.ideas ?? []);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Generation failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="space-y-4">
      <div>
        <label htmlFor="ai-cw-topic" className="block text-sm font-medium mb-1" style={labelStyle}>What do you want to communicate?</label>
        <textarea aria-label="., 'Remind Customers About The New Sweet Corn Season Starting Next Week, Emphasize Freshness And Local Delivery'"
          id="ai-cw-topic"
          value={topic}
          onChange={(e) => setTopic(e.target.value)}
          rows={3}
          placeholder="e.g., 'Remind customers about the new sweet corn season starting next week, emphasize freshness and local delivery'"
          className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
          style={textareaStyle}
        />
      </div>
      <button type="button"
        onClick={handleGenerate}
        disabled={loading || !topic.trim()}
        className={btnPrimaryClass}
        style={{
          ...btnPrimaryStyle,
          opacity: (loading || !topic.trim()) ? 0.5 : 1,
          cursor: (loading || !topic.trim()) ? 'not-allowed' : 'pointer',
        }}
      >
        {loading ? "Generating..." : "Generate Campaign Ideas"}
      </button>
      {error && <p className="text-sm" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
      {results.length > 0 && (
        <div className="space-y-3">
          {results.map((idea, i) => (
            <AdminCard key={`idea-${i}-${idea.subject}`} className="p-4">
              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-accent)' }}>Idea {i + 1}</p>
              <p className="text-sm font-medium mb-1" style={{ color: 'var(--admin-text-primary)' }}><span style={{ color: 'var(--admin-text-muted)' }}>Subject:</span> {idea.subject}</p>
              <p className="text-sm mt-2 whitespace-pre-line" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.6 }}>{idea.body}</p>
            </AdminCard>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Product Writer Tool ────────────────────────────────────────────────────────

function ProductWriterTool({ brandId }: { brandId: string }) {
  const [productName, setProductName] = useState("");
  const [category, setCategory] = useState("");
  const [price, setPrice] = useState("");
  const [unit, setUnit] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ name: string; description: string; altText: string; priceNote: string } | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleGenerate() {
    if (!productName.trim()) return;
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const res = await fetch("/api/ai/product-writer", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ productName, category, price, unit, brandId }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Generation failed");
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Generation failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label htmlFor="ai-pw-product-name" className="block text-sm font-medium mb-1" style={labelStyle}>
            Product Name <span className="text-red-400 ml-0.5" aria-hidden="true">*</span>
          </label>
          <input aria-label="Sweet Corn" id="ai-pw-product-name" type="text" value={productName} onChange={(e) => setProductName(e.target.value)} placeholder="Sweet Corn" required aria-required="true" className={inputBaseClass} style={inputStyle} />
        </div>
        <div>
          <label htmlFor="ai-pw-category" className="block text-sm font-medium mb-1" style={labelStyle}>Category</label>
          <input aria-label="Vegetables" id="ai-pw-category" type="text" value={category} onChange={(e) => setCategory(e.target.value)} placeholder="Vegetables" className={inputBaseClass} style={inputStyle} />
        </div>
        <div>
          <label htmlFor="ai-pw-price" className="block text-sm font-medium mb-1" style={labelStyle}>Price</label>
          <input aria-label="$4.50" id="ai-pw-price" type="text" value={price} onChange={(e) => setPrice(e.target.value)} placeholder="$4.50" className={inputBaseClass} style={inputStyle} />
        </div>
        <div>
          <label htmlFor="ai-pw-unit" className="block text-sm font-medium mb-1" style={labelStyle}>Unit</label>
          <input aria-label="Per Dozen" id="ai-pw-unit" type="text" value={unit} onChange={(e) => setUnit(e.target.value)} placeholder="per dozen" className={inputBaseClass} style={inputStyle} />
        </div>
      </div>
      <button type="button"
        onClick={handleGenerate}
        disabled={loading || !productName.trim()}
        className={btnPrimaryClass}
        style={{
          ...btnPrimaryStyle,
          opacity: (loading || !productName.trim()) ? 0.5 : 1,
          cursor: (loading || !productName.trim()) ? 'not-allowed' : 'pointer',
        }}
      >
        {loading ? "Generating..." : "Write Description"}
      </button>
      {error && <p className="text-sm" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
      {result && (
        <AdminCard className="p-5 space-y-4">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Product Name</p>
            <p className="text-base font-semibold" style={{ color: 'var(--admin-text-primary)' }}>{result.name}</p>
          </div>
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Description</p>
            <p className="text-sm" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.6 }}>{result.description}</p>
          </div>
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Image Alt Text</p>
            <p className="text-sm" style={{ color: 'var(--admin-text-secondary)' }}>{result.altText}</p>
          </div>
          {result.priceNote && (
            <div>
              <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Pricing Note</p>
              <p className="text-sm" style={{ color: 'var(--admin-text-secondary)' }}>{result.priceNote}</p>
            </div>
          )}
        </AdminCard>
      )}
    </div>
  );
}

// ── Report Explainer Tool ──────────────────────────────────────────────────────

function ReportExplainerTool({ brandId }: { brandId: string }) {
  const [reportType, setReportType] = useState("orders-by-stop");
  const [dateRange, setDateRange] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ summary: string; keyInsights: string[]; suggestedActions: string[] } | null>(null);
  const [error, setError] = useState<string | null>(null);

  const reportTypes = [
    { value: "orders-by-stop", label: "Orders by Stop" },
    { value: "sales-by-product", label: "Sales by Product" },
    { value: "fulfillment", label: "Fulfillment" },
    { value: "pickup-status", label: "Pickup Status" },
    { value: "contact-growth", label: "Contact Growth" },
    { value: "campaigns", label: "Campaign Activity" },
  ];

  async function handleExplain() {
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const res = await fetch("/api/ai/report-explainer", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ reportType, dateRange, brandId, reportData: [] }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Analysis failed");
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Analysis failed");
    } finally {
      setLoading(false);
    }
  }

  function copyToClipboard(text: string) {
    navigator.clipboard.writeText(text);
  }

  return (
    <div className="space-y-4">
      <p className="text-sm rounded-lg p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)', color: 'var(--admin-text-muted)' }}>
        The Report Explainer analyzes any report tab from the Reports dashboard. Switch to a report tab, copy the data, and paste it here for an AI-generated breakdown.
      </p>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label htmlFor="ai-rep-type" className="block text-sm font-medium mb-1" style={labelStyle}>Report Type</label>
          <select aria-label="Ai Rep Type"
            id="ai-rep-type"
            value={reportType}
            onChange={(e) => setReportType(e.target.value)}
            className={inputBaseClass}
            style={inputStyle}
          >
            {reportTypes.map((r) => (
              <option key={r.value} value={r.value}>{r.label}</option>
            ))}
          </select>
        </div>
        <div>
          <label htmlFor="ai-rep-range" className="block text-sm font-medium mb-1" style={labelStyle}>Date Range</label>
          <input aria-label="., Last 7 Days, March 2026"
            id="ai-rep-range"
            type="text"
            value={dateRange}
            onChange={(e) => setDateRange(e.target.value)}
            placeholder="e.g., Last 7 days, March 2026"
            className={inputBaseClass}
            style={inputStyle}
          />
        </div>
      </div>
      <div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
        AI-generated suggestions — review before use. Not a substitute for business judgment.
      </div>
      <button type="button"
        onClick={handleExplain}
        disabled={loading}
        className={btnPrimaryClass}
        style={{ ...btnPrimaryStyle, opacity: loading ? 0.5 : 1 }}
      >
        {loading ? "Analyzing..." : "Explain Report"}
      </button>
      {error && <p className="text-sm" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
      {result && (
        <div className="space-y-4">
          <AdminCard className="p-5">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Summary</p>
            <p className="text-sm" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.6 }}>{result.summary}</p>
          </AdminCard>
          <AdminCard className="p-5">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Key Insights</p>
            <ul className="space-y-2">
              {result.keyInsights.map((insight) => (
                <li key={insight} className="flex items-start gap-2 text-sm" style={{ color: 'var(--admin-text-secondary)' }}>
                  <span style={{ color: 'var(--admin-accent)' }}>→</span>
                  <span>{insight}</span>
                </li>
              ))}
            </ul>
          </AdminCard>
          <AdminCard className="p-5">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Suggested Actions</p>
            <ul className="space-y-2">
              {result.suggestedActions.map((action) => (
                <li key={action} className="flex items-start gap-2 text-sm" style={{ color: 'var(--admin-text-secondary)' }}>
                  <span style={{ color: 'var(--admin-success)' }}>✓</span>
                  <span>{action}</span>
                </li>
              ))}
            </ul>
          </AdminCard>
          <button type="button"
            onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
            className="text-xs flex items-center gap-1 transition-colors"
            style={{ color: 'var(--admin-text-muted)' }}
          >
            Copy to clipboard
          </button>
        </div>
      )}
    </div>
  );
}

// ── Pricing Advisor Tool ────────────────────────────────────────────────────────

type PriceTier = { tier: string; price: string };
type SalesEntry = { date: string; units_sold: string; revenue: string };

function PricingAdvisorTool({ brandId }: { brandId: string }) {
  const [productName, setProductName] = useState("");
  const [priceTiers, setPriceTiers] = useState<PriceTier[]>([{ tier: "", price: "" }]);
  const [historicalSales, setHistoricalSales] = useState<SalesEntry[]>([{ date: "", units_sold: "", revenue: "" }]);
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{
    currentState: string;
    recommendations: Array<{
      productName: string;
      currentPrice: number;
      suggestedPrice: number;
      direction: string;
      reasoning: string;
      estimatedRevenueImpact: string;
    }>;
    opportunities: string[];
    warnings: string[];
  } | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleAnalyze() {
    if (!productName.trim()) return;
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const parsedTiers = priceTiers
        .filter((t) => t.tier.trim() && t.price.trim())
        .map((t) => ({ tier: t.tier.trim(), price: parseFloat(t.price) || 0 }));
      const parsedSales = historicalSales
        .filter((s) => s.date.trim())
        .map((s) => ({
          date: s.date.trim(),
          units_sold: parseInt(s.units_sold) || 0,
          revenue: parseFloat(s.revenue) || 0,
        }));

      const res = await fetch("/api/ai/pricing-advisor", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          brandId,
          productName,
          currentPriceTiers: parsedTiers,
          historicalSales: parsedSales,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Analysis failed");
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Analysis failed");
    } finally {
      setLoading(false);
    }
  }

  function copyToClipboard(text: string) {
    navigator.clipboard.writeText(text);
  }

  function addTier() { setPriceTiers([...priceTiers, { tier: "", price: "" }]); }
  function removeTier(i: number) { setPriceTiers(priceTiers.filter((_, idx) => idx !== i)); }
  function updateTier(i: number, field: keyof PriceTier, val: string) {
    const updated = [...priceTiers]; updated[i] = { ...updated[i], [field]: val }; setPriceTiers(updated);
  }

  function addSale() { setHistoricalSales([...historicalSales, { date: "", units_sold: "", revenue: "" }]); }
  function removeSale(i: number) { setHistoricalSales(historicalSales.filter((_, idx) => idx !== i)); }
  function updateSale(i: number, field: keyof SalesEntry, val: string) {
    const updated = [...historicalSales]; updated[i] = { ...updated[i], [field]: val }; setHistoricalSales(updated);
  }

  return (
    <div className="space-y-4">
      <p className="text-sm rounded-lg p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)', color: 'var(--admin-text-muted)' }}>
        Enter a product name and optional price tiers or historical sales data for AI-powered pricing recommendations.
      </p>
      <div>
        <label htmlFor="ai-pa-product-name" className="block text-sm font-medium mb-1" style={labelStyle}>
          Product Name <span className="text-red-400 ml-0.5" aria-hidden="true">*</span>
        </label>
        <input aria-label="Sweet Corn"
          id="ai-pa-product-name"
          type="text"
          value={productName}
          onChange={(e) => setProductName(e.target.value)}
          placeholder="Sweet Corn"
          required
          aria-required="true"
          className={inputBaseClass}
          style={inputStyle}
        />
      </div>

      {/* Price Tiers */}
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <label className="block text-sm font-medium" style={labelStyle}>Price Tiers</label>
          <button type="button" onClick={addTier} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Tier</button>
        </div>
        {priceTiers.map((tier, i) => (
          <div key={`tier-${i}-${tier.tier}-${tier.price}`} className="flex items-center gap-2">
            <input aria-label="., Wholesale"
              type="text"
              value={tier.tier}
              onChange={(e) => updateTier(i, "tier", e.target.value)}
              placeholder="e.g., Wholesale"
              className="flex-1 rounded-lg px-3 py-2 text-sm"
              style={{ border: '1px solid var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
            />
            <div className="relative flex-1">
              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm" style={{ color: 'var(--admin-text-muted)' }}>$</span>
              <input aria-label="0.00"
                type="text"
                value={tier.price}
                onChange={(e) => updateTier(i, "price", e.target.value)}
                placeholder="0.00"
                className="w-full rounded-lg pl-7 pr-3 py-2 text-sm"
                style={{ border: '1px solid var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
              />
            </div>
            {priceTiers.length > 1 && (
              <button type="button" onClick={() => removeTier(i)} className="text-xs px-2 transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
            )}
          </div>
        ))}
      </div>

      {/* Historical Sales */}
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <label className="block text-sm font-medium" style={labelStyle}>Historical Sales</label>
          <button type="button" onClick={addSale} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Row</button>
        </div>
        <AdminCard className="divide-y" style={{ border: '1px solid var(--admin-border)' }}>
          <div className="grid grid-cols-4 gap-2 px-3 py-2">
            <span className="text-xs font-medium" style={{ color: 'var(--admin-text-muted)' }}>Date</span>
            <span className="text-xs font-medium" style={{ color: 'var(--admin-text-muted)' }}>Units Sold</span>
            <span className="text-xs font-medium" style={{ color: 'var(--admin-text-muted)' }}>Revenue</span>
            <span />
          </div>
          {historicalSales.map((sale, i) => (
            <div key={`sale-${i}-${sale.date}`} className="grid grid-cols-4 gap-2 px-3 py-2 items-center">
              <input aria-label="2026 04 01"
                type="text"
                value={sale.date}
                onChange={(e) => updateSale(i, "date", e.target.value)}
                placeholder="2026-04-01"
                className="rounded-lg border px-2 py-1.5 text-xs"
                style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
              />
              <input aria-label="120"
                type="text"
                value={sale.units_sold}
                onChange={(e) => updateSale(i, "units_sold", e.target.value)}
                placeholder="120"
                className="rounded-lg border px-2 py-1.5 text-xs"
                style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
              />
              <div className="relative">
                <span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs" style={{ color: 'var(--admin-text-muted)' }}>$</span>
                <input aria-label="540"
                  type="text"
                  value={sale.revenue}
                  onChange={(e) => updateSale(i, "revenue", e.target.value)}
                  placeholder="540"
                  className="w-full rounded-lg border pl-5 pr-2 py-1.5 text-xs"
                  style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
                />
              </div>
              {historicalSales.length > 1 && (
                <button type="button" onClick={() => removeSale(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
              )}
            </div>
          ))}
        </AdminCard>
      </div>
      <div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
        AI-generated suggestions — review before use. Not a substitute for business judgment.
      </div>
      <button type="button"
        onClick={handleAnalyze}
        disabled={loading || !productName.trim()}
        className={btnPrimaryClass}
        style={{
          ...btnPrimaryStyle,
          opacity: (loading || !productName.trim()) ? 0.5 : 1,
          cursor: (loading || !productName.trim()) ? 'not-allowed' : 'pointer',
        }}
      >
        {loading ? "Analyzing..." : "Analyze Pricing"}
      </button>
      {error && <p className="text-sm" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
      {result && (
        <div className="space-y-4">
          <AdminCard className="p-5">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Current State</p>
            <p className="text-sm" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.6 }}>{result.currentState}</p>
          </AdminCard>
          {result.recommendations.map((rec, i) => (
            <AdminCard key={`rec-${i}-${rec.productName}-${rec.direction}`} className="p-5">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-semibold" style={{ color: 'var(--admin-text-primary)' }}>{rec.productName}</p>
                <span 
                  className="text-xs font-bold rounded-full px-2 py-0.5"
                  style={{
                    background: rec.direction === "increase" ? 'rgba(16, 185, 129, 0.1)' : rec.direction === "decrease" ? 'rgba(239, 68, 68, 0.1)' : 'rgba(0, 0, 0, 0.04)',
                    color: rec.direction === "increase" ? '#047857' : rec.direction === "decrease" ? '#dc2626' : 'var(--admin-text-muted)',
                  }}
                >
                  {rec.direction}
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm mb-2">
                <span style={{ color: 'var(--admin-text-muted)' }}>${rec.currentPrice}</span>
                <span style={{ color: 'var(--admin-text-muted)' }}>→</span>
                <span className="font-bold" style={{ color: 'var(--admin-accent)' }}>${rec.suggestedPrice}</span>
                <span className={`text-xs ml-auto ${rec.estimatedRevenueImpact.startsWith("+") ? 'text-green-600' : ''}`} style={{ color: rec.estimatedRevenueImpact.startsWith("+") ? '#059669' : 'var(--admin-text-muted)' }}>
                  {rec.estimatedRevenueImpact}
                </span>
              </div>
              <p className="text-sm" style={{ color: 'var(--admin-text-secondary)' }}>{rec.reasoning}</p>
            </AdminCard>
          ))}
          {result.opportunities.length > 0 && (
            <AdminCard className="p-5" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Opportunities</p>
              <ul className="space-y-1">
                {result.opportunities.map((opp) => (
                  <li key={opp} className="text-sm" style={{ color: '#059669' }}>• {opp}</li>
                ))}
              </ul>
            </AdminCard>
          )}
          {result.warnings.length > 0 && (
            <AdminCard className="p-5" style={{ backgroundColor: 'rgba(171, 162, 120, 0.08)', border: '1px solid rgba(171, 162, 120, 0.2)' }}>
              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#92781e' }}>Warnings</p>
              <ul className="space-y-1">
                {result.warnings.map((warn) => (
                  <li key={warn} className="text-sm" style={{ color: '#a6953f' }}>• {warn}</li>
                ))}
              </ul>
            </AdminCard>
          )}
          <button type="button"
            onClick={() => copyToClipboard(JSON.stringify(result, null, 2))}
            className="text-xs flex items-center gap-1 transition-colors"
            style={{ color: 'var(--admin-text-muted)' }}
          >
            Copy to clipboard
          </button>
        </div>
      )}
    </div>
  );
}

// ── Stop Blast Advisor Tool ────────────────────────────────────────────────────

function StopBlastAdvisorTool({ brandId }: { brandId: string }) {
  const [stopName, setStopName] = useState("");
  const [stopDate, setStopDate] = useState("");
  const [city, setCity] = useState("");
  const [customerCount, setCustomerCount] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{
    timingRecommendation: string;
    subjectLine: string;
    bodyPreview: string;
    audienceSize: string;
    audienceRecommendation: string;
    contentAngles: Array<{ angle: string; reasoning: string }>;
    warnings: string[];
  } | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleAnalyze() {
    if (!stopName.trim()) return;
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const res = await fetch("/api/ai/stop-blast-advisor", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          brandId,
          stopName,
          stopDate,
          city,
          recentOrders: [],
          customerCount: customerCount ? parseInt(customerCount) : undefined,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Analysis failed");
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Analysis failed");
    } finally {
      setLoading(false);
    }
  }

  function copyToClipboard(text: string) {
    navigator.clipboard.writeText(text);
  }

  return (
    <div className="space-y-4">
      <p className="text-sm rounded-lg p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)', color: 'var(--admin-text-muted)' }}>
        Enter details about the stop you want to send a blast for. The AI will suggest optimal timing, subject lines, content angles, and audience targeting.
      </p>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1" style={labelStyle}>Stop Name *</label>
          <input aria-label="Downtown Farmers Market" type="text" value={stopName} onChange={(e) => setStopName(e.target.value)} placeholder="Downtown Farmers Market" className={inputBaseClass} style={inputStyle} />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1" style={labelStyle}>Stop Date</label>
          <input aria-label="2026 06 15" type="text" value={stopDate} onChange={(e) => setStopDate(e.target.value)} placeholder="2026-06-15" className={inputBaseClass} style={inputStyle} />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1" style={labelStyle}>City</label>
          <input aria-label="Greeley" type="text" value={city} onChange={(e) => setCity(e.target.value)} placeholder="Greeley" className={inputBaseClass} style={inputStyle} />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1" style={labelStyle}>Customer Count</label>
          <input aria-label="42" type="text" value={customerCount} onChange={(e) => setCustomerCount(e.target.value)} placeholder="42" className={inputBaseClass} style={inputStyle} />
        </div>
      </div>
      <div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
        AI-generated suggestions — review before use. Not a substitute for business judgment.
      </div>
      <button type="button"
        onClick={handleAnalyze}
        disabled={loading || !stopName.trim()}
        className={btnPrimaryClass}
        style={{
          ...btnPrimaryStyle,
          opacity: (loading || !stopName.trim()) ? 0.5 : 1,
          cursor: (loading || !stopName.trim()) ? 'not-allowed' : 'pointer',
        }}
      >
        {loading ? "Analyzing..." : "Get Recommendations"}
      </button>
      {error && <p className="text-sm" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
      {result && (
        <div className="space-y-4">
          <AdminCard className="p-5">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Timing</p>
            <p className="text-sm" style={{ color: 'var(--admin-text-secondary)' }}>{result.timingRecommendation}</p>
          </AdminCard>
          <AdminCard className="p-5" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Recommended Subject Line</p>
            <p className="text-base font-semibold" style={{ color: 'var(--admin-text-primary)' }}>{result.subjectLine}</p>
            <button type="button" onClick={() => copyToClipboard(result.subjectLine)} className="mt-2 text-xs flex items-center gap-1 transition-colors" style={{ color: 'var(--admin-accent)' }}>
              Copy
            </button>
          </AdminCard>
          <AdminCard className="p-5">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Body Preview</p>
            <p className="text-sm" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.6 }}>{result.bodyPreview}</p>
          </AdminCard>
          <AdminCard className="p-5">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Audience</p>
            <p className="text-sm" style={{ color: 'var(--admin-text-secondary)' }}>{result.audienceRecommendation}</p>
            <span 
              className="inline-block mt-1 text-xs rounded-full px-2 py-0.5"
              style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', color: '#2563eb' }}
            >
              {result.audienceSize} recipients
            </span>
          </AdminCard>
          {result.contentAngles.map((a, i) => (
            <AdminCard key={`angle-${i}-${a.angle}`} className="p-4">
              <p className="text-sm font-semibold mb-1" style={{ color: 'var(--admin-text-primary)' }}>{a.angle}</p>
              <p className="text-xs" style={{ color: 'var(--admin-text-muted)' }}>{a.reasoning}</p>
            </AdminCard>
          ))}
          {result.warnings.length > 0 && (
            <AdminCard className="p-4" style={{ backgroundColor: 'rgba(171, 162, 120, 0.08)', border: '1px solid rgba(171, 162, 120, 0.2)' }}>
              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#92781e' }}>Warnings</p>
              {result.warnings.map((w) => (
                <p key={w} className="text-xs" style={{ color: '#a6953f' }}>• {w}</p>
              ))}
            </AdminCard>
          )}
        </div>
      )}
    </div>
  );
}

// ── Customer Insights Tool ────────────────────────────────────────────────────

function CustomerInsightsTool({ brandId }: { brandId: string }) {
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{
    queryType: string;
    explanation: string;
    results: Record<string, unknown>[];
    count: number;
    nlQuery: string;
  } | null>(null);
  const [error, setError] = useState<string | null>(null);

  const exampleQueries = [
    "Which customers haven't ordered in 45 days?",
    "What products are trending this month?",
    "Who are my top customers by revenue?",
    "Show recent orders from the last 7 days",
    "Which customers are at risk of churning?",
  ];

  async function handleAnalyze(nlQuery?: string) {
    const q = nlQuery ?? query;
    if (!q.trim()) return;
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const res = await fetch("/api/ai/customer-insights", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ brandId, nlQuery: q }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Analysis failed");
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Analysis failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="space-y-4">
      <p className="text-sm rounded-lg p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)', color: 'var(--admin-text-muted)' }}>
        Ask questions about your customers and orders in plain English. The AI will analyze and return actionable insights.
      </p>
      <div>
        <label className="block text-sm font-medium mb-1" style={labelStyle}>Ask about your customers</label>
        <textarea aria-label="., 'Which Customers Haven't Ordered In 45 Days?'"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          rows={2}
          placeholder="e.g., 'Which customers haven't ordered in 45 days?'"
          className={inputBaseClass}
          style={textareaStyle}
        />
      </div>
      <div className="flex flex-wrap gap-2">
        {exampleQueries.map((q) => (
          <button type="button"
            key={q}
            onClick={() => { setQuery(q); handleAnalyze(q); }}
            className="rounded-full px-3 py-1 text-xs transition-all"
            style={{ 
              backgroundColor: 'var(--admin-bg)', 
              border: '1px solid var(--admin-border)',
              color: 'var(--admin-text-secondary)',
            }}
          >
            {q}
          </button>
        ))}
      </div>
      <div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
        AI-generated suggestions — review before use. Not a substitute for business judgment.
      </div>
      <button type="button"
        onClick={() => handleAnalyze()}
        disabled={loading || !query.trim()}
        className={btnPrimaryClass}
        style={{
          ...btnPrimaryStyle,
          opacity: (loading || !query.trim()) ? 0.5 : 1,
          cursor: (loading || !query.trim()) ? 'not-allowed' : 'pointer',
        }}
      >
        {loading ? "Analyzing..." : "Analyze"}
      </button>
      {error && <p className="text-sm" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
      {result && (
        <div className="space-y-4">
          <AdminCard className="p-4">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Query Type</p>
            <span 
              className="rounded-full px-2 py-0.5 text-xs font-medium"
              style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', color: '#047857' }}
            >
              {result.queryType?.replace("_", " ")}
            </span>
            <p className="text-sm mt-2" style={{ color: 'var(--admin-text-muted)' }}>{result.explanation}</p>
          </AdminCard>
          <AdminCard className="p-4">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>
              Results <span style={{ color: 'var(--admin-accent)' }}>({result.count} found)</span>
            </p>
            {result.results.length === 0 ? (
              <p className="text-sm" style={{ color: 'var(--admin-text-muted)' }}>No results found.</p>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-xs" style={{ color: 'var(--admin-text-secondary)' }}>
                  <thead>
                    <tr style={{ borderBottom: '1px solid var(--admin-border)' }}>
                      {Object.keys(result.results[0] ?? {}).map((k) => (
                        <th key={k} className="text-left px-2 py-1.5 font-medium uppercase" style={{ color: 'var(--admin-text-muted)' }}>{k}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {result.results.map((row) => {
                      const rowKey = Object.values(row).slice(0, 2).map(v => String(v ?? "")).join("-");
                      return (
                      <tr key={rowKey} style={{ borderBottom: '1px solid var(--admin-border-light)' }}>
                        {Object.entries(row).map(([colKey, v]) => (
                          <td key={colKey} className="px-2 py-1.5" style={{ color: 'var(--admin-text-secondary)' }}>{String(v ?? "—")}</td>
                        ))}
                      </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </AdminCard>
        </div>
      )}
    </div>
  );
}

// ── Route Optimizer Tool ──────────────────────────────────────────────────────

type StopEntry = { name: string; city: string; state: string; address: string; time_window: string };

function RouteOptimizerTool({ brandId }: { brandId: string }) {
  const [stops, setStops] = useState<StopEntry[]>([
    { name: "", city: "", state: "", address: "", time_window: "" },
    { name: "", city: "", state: "", address: "", time_window: "" },
  ]);
  const [startLocation, setStartLocation] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{
    optimizedSequence: Array<{ position: number; stopName: string; city: string; state: string; reason: string }>;
    totalEstimatedDistance: string;
    totalEstimatedDriveTime: string;
    warnings: string[];
    suggestions: string[];
  } | null>(null);
  const [error, setError] = useState<string | null>(null);

  function addStop() {
    setStops([...stops, { name: "", city: "", state: "", address: "", time_window: "" }]);
  }

  function removeStop(index: number) {
    setStops(stops.filter((_, i) => i !== index));
  }

  function updateStop(index: number, field: keyof StopEntry, value: string) {
    const updated = [...stops];
    updated[index] = { ...updated[index], [field]: value };
    setStops(updated);
  }

  async function handleOptimize() {
    const validStops = stops.filter((s) => s.name.trim() && s.city.trim() && s.state.trim());
    if (validStops.length < 2) return;
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const res = await fetch("/api/ai/route-optimizer", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ brandId, stops: validStops, startLocation }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Optimization failed");
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Optimization failed");
    } finally {
      setLoading(false);
    }
  }

  function copyToClipboard(text: string) {
    navigator.clipboard.writeText(text);
  }

  const validStops = stops.filter((s) => s.name.trim() && s.city.trim() && s.state.trim());

  return (
    <div className="space-y-4">
      <p className="text-sm rounded-lg p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)', color: 'var(--admin-text-muted)' }}>
        Add your stops below. You need at least 2 stops to optimize a route.
      </p>
      <div>
        <label className="block text-sm font-medium mb-1" style={labelStyle}>Start Location</label>
        <input aria-label="Warehouse, Greeley CO"
          type="text"
          value={startLocation}
          onChange={(e) => setStartLocation(e.target.value)}
          placeholder="Warehouse, Greeley CO"
          className={inputBaseClass}
          style={inputStyle}
        />
      </div>

      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="block text-sm font-medium" style={labelStyle}>Stops</label>
          <button type="button"
            onClick={addStop}
            className="text-xs flex items-center gap-1 transition-colors"
            style={{ color: 'var(--admin-accent)' }}
          >
            + Add Stop
          </button>
        </div>
        {stops.map((stop, i) => (
          <AdminCard key={`stop-${i}-${stop.name}-${stop.city}-${stop.state}`} className="p-4 space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--admin-text-muted)' }}>Stop {i + 1}</span>
              {stops.length > 2 && (
                <button type="button" onClick={() => removeStop(i)} className="text-xs transition-colors" style={{ color: 'var(--admin-danger)' }}>
                  Remove
                </button>
              )}
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>Name *</label>
                <input aria-label="Farmers Market"
                  type="text"
                  value={stop.name}
                  onChange={(e) => updateStop(i, "name", e.target.value)}
                  placeholder="Farmers Market"
                  className="w-full rounded-lg px-3 py-2 text-sm"
                  style={{ border: '1px solid var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
                />
              </div>
              <div>
                <label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>City *</label>
                <input aria-label="Greeley"
                  type="text"
                  value={stop.city}
                  onChange={(e) => updateStop(i, "city", e.target.value)}
                  placeholder="Greeley"
                  className="w-full rounded-lg px-3 py-2 text-sm"
                  style={{ border: '1px solid var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
                />
              </div>
              <div>
                <label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>State *</label>
                <input aria-label="CO"
                  type="text"
                  value={stop.state}
                  onChange={(e) => updateStop(i, "state", e.target.value)}
                  placeholder="CO"
                  className="w-full rounded-lg px-3 py-2 text-sm"
                  style={{ border: '1px solid var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
                />
              </div>
              <div>
                <label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>Address</label>
                <input aria-label="123 Main St"
                  type="text"
                  value={stop.address}
                  onChange={(e) => updateStop(i, "address", e.target.value)}
                  placeholder="123 Main St"
                  className="w-full rounded-lg px-3 py-2 text-sm"
                  style={{ border: '1px solid var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
                />
              </div>
            </div>
            <div>
              <label className="block text-xs mb-1" style={{ color: 'var(--admin-text-muted)' }}>Time Window</label>
              <input aria-label="8am–12pm"
                type="text"
                value={stop.time_window}
                onChange={(e) => updateStop(i, "time_window", e.target.value)}
                placeholder="8am–12pm"
                className="w-full rounded-lg px-3 py-2 text-sm"
                style={{ border: '1px solid var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
              />
            </div>
          </AdminCard>
        ))}
      </div>
      <div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
        AI-generated suggestions — review before use. Not a substitute for professional routing software.
      </div>
      <button type="button"
        onClick={handleOptimize}
        disabled={loading || validStops.length < 2}
        className={btnPrimaryClass}
        style={{
          ...btnPrimaryStyle,
          opacity: (loading || validStops.length < 2) ? 0.5 : 1,
          cursor: (loading || validStops.length < 2) ? 'not-allowed' : 'pointer',
        }}
      >
        {loading ? "Optimizing..." : "Optimize Route"}
      </button>
      {error && <p className="text-sm" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
      {result && (
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-3">
            <AdminCard className="p-4">
              <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Est. Distance</p>
              <p className="text-base font-bold" style={{ color: 'var(--admin-text-primary)' }}>{result.totalEstimatedDistance}</p>
            </AdminCard>
            <AdminCard className="p-4">
              <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Drive Time</p>
              <p className="text-base font-bold" style={{ color: 'var(--admin-text-primary)' }}>{result.totalEstimatedDriveTime}</p>
            </AdminCard>
          </div>
          <AdminCard className="p-4" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Optimized Sequence</p>
            {result.optimizedSequence.map((s, i) => (
              <div key={`seq-${i}-${s.position}-${s.stopName}`} className="flex items-start gap-3 py-2" style={{ borderBottom: i < result.optimizedSequence.length - 1 ? '1px solid var(--admin-border-light)' : 'none' }}>
                <span 
                  className="flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold text-white flex-shrink-0"
                  style={{ backgroundColor: 'var(--admin-accent)' }}
                >
                  {s.position}
                </span>
                <div>
                  <p className="text-sm font-semibold" style={{ color: 'var(--admin-text-primary)' }}>{s.stopName}</p>
                  <p className="text-xs" style={{ color: 'var(--admin-text-muted)' }}>{s.city}, {s.state}</p>
                  <p className="text-xs mt-0.5" style={{ color: '#047857' }}>{s.reason}</p>
                </div>
              </div>
            ))}
          </AdminCard>
          {result.suggestions.length > 0 && (
            <AdminCard className="p-4" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Suggestions</p>
              {result.suggestions.map((s) => <p key={s} className="text-sm" style={{ color: '#059669' }}>✓ {s}</p>)}
            </AdminCard>
          )}
          {result.warnings.length > 0 && (
            <AdminCard className="p-4" style={{ backgroundColor: 'rgba(171, 162, 120, 0.08)', border: '1px solid rgba(171, 162, 120, 0.2)' }}>
              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#92781e' }}>Warnings</p>
              {result.warnings.map((w) => <p key={w} className="text-sm" style={{ color: '#a6953f' }}>⚠ {w}</p>)}
            </AdminCard>
          )}
          <button type="button" 
            onClick={() => copyToClipboard(JSON.stringify(result, null, 2))} 
            className="text-xs flex items-center gap-1 transition-colors"
            style={{ color: 'var(--admin-text-muted)' }}
          >
            Copy to clipboard
          </button>
        </div>
      )}
    </div>
  );
}

// ── Demand Forecasting Tool ───────────────────────────────────────────────────

type ForecastEntry = { date: string; quantity_sold: string; stop: string };

function DemandForecastTool({ brandId }: { brandId: string }) {
  const [productName, setProductName] = useState("");
  const [stopName, setStopName] = useState("");
  const [historicalData, setHistoricalData] = useState<ForecastEntry[]>([
    { date: "", quantity_sold: "", stop: "" },
  ]);
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{
    currentTrend: string;
    prediction: {
      nextStopVolume: number;
      nextWeekVolume: number;
      confidence: string;
      confidenceReason: string;
    };
    recommendedStock: { units: number; reasoning: string };
    seasonalFactors: string[];
    riskFlags: string[];
  } | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleAnalyze() {
    if (!productName.trim()) return;
    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const parsedData = historicalData
        .filter((d) => d.date.trim())
        .map((d) => ({
          date: d.date.trim(),
          quantity_sold: parseInt(d.quantity_sold) || 0,
          stop: d.stop.trim(),
        }));

      const res = await fetch("/api/ai/demand-forecast", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ brandId, productName, stopName, historicalData: parsedData }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Analysis failed");
      setResult(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Analysis failed");
    } finally {
      setLoading(false);
    }
  }

  function copyToClipboard(text: string) {
    navigator.clipboard.writeText(text);
  }

  function addRow() { setHistoricalData([...historicalData, { date: "", quantity_sold: "", stop: "" }]); }
  function removeRow(i: number) { setHistoricalData(historicalData.filter((_, idx) => idx !== i)); }
  function updateRow(i: number, field: keyof ForecastEntry, val: string) {
    const updated = [...historicalData]; updated[i] = { ...updated[i], [field]: val }; setHistoricalData(updated);
  }

  return (
    <div className="space-y-4">
      <p className="text-sm rounded-lg p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)', color: 'var(--admin-text-muted)' }}>
        Enter a product name for demand forecasting. Add historical sales rows to improve accuracy.
      </p>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1" style={labelStyle}>Product Name *</label>
          <input aria-label="Sweet Corn" type="text" value={productName} onChange={(e) => setProductName(e.target.value)} placeholder="Sweet Corn" className={inputBaseClass} style={inputStyle} />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1" style={labelStyle}>Stop Name</label>
          <input aria-label="Downtown Farmers Market" type="text" value={stopName} onChange={(e) => setStopName(e.target.value)} placeholder="Downtown Farmers Market" className={inputBaseClass} style={inputStyle} />
        </div>
      </div>

      {/* Historical Data */}
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <label className="block text-sm font-medium" style={labelStyle}>Historical Sales</label>
          <button type="button" onClick={addRow} className="text-xs transition-colors" style={{ color: 'var(--admin-accent)' }}>+ Add Row</button>
        </div>
        <AdminCard className="divide-y" style={{ border: '1px solid var(--admin-border)' }}>
          <div className="grid grid-cols-4 gap-2 px-3 py-2">
            <span className="text-xs font-medium" style={{ color: 'var(--admin-text-muted)' }}>Date</span>
            <span className="text-xs font-medium" style={{ color: 'var(--admin-text-muted)' }}>Units Sold</span>
            <span className="text-xs font-medium" style={{ color: 'var(--admin-text-muted)' }}>Stop</span>
            <span />
          </div>
          {historicalData.map((row, i) => (
            <div key={`hist-${i}-${row.date}-${row.stop}`} className="grid grid-cols-4 gap-2 px-3 py-2 items-center">
              <input aria-label="2026 04 01"
                type="text"
                value={row.date}
                onChange={(e) => updateRow(i, "date", e.target.value)}
                placeholder="2026-04-01"
                className="rounded-lg border px-2 py-1.5 text-xs"
                style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
              />
              <input aria-label="120"
                type="text"
                value={row.quantity_sold}
                onChange={(e) => updateRow(i, "quantity_sold", e.target.value)}
                placeholder="120"
                className="rounded-lg border px-2 py-1.5 text-xs"
                style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
              />
              <input aria-label="Farmers Market"
                type="text"
                value={row.stop}
                onChange={(e) => updateRow(i, "stop", e.target.value)}
                placeholder="Farmers Market"
                className="rounded-lg border px-2 py-1.5 text-xs"
                style={{ borderColor: 'var(--admin-border)', backgroundColor: 'var(--admin-bg)', color: 'var(--admin-text-primary)' }}
              />
              {historicalData.length > 1 && (
                <button type="button" onClick={() => removeRow(i)} className="text-xs justify-self-end transition-colors" style={{ color: 'var(--admin-danger)' }}>✕</button>
              )}
            </div>
          ))}
        </AdminCard>
      </div>
      <div className="rounded-lg p-3 text-xs" style={{ backgroundColor: 'rgba(171, 162, 120, 0.1)', border: '1px solid rgba(171, 162, 120, 0.2)', color: '#92781e' }}>
        AI-generated forecasts — review before use. Not a substitute for professional supply chain planning.
      </div>
      <button type="button"
        onClick={handleAnalyze}
        disabled={loading || !productName.trim()}
        className={btnPrimaryClass}
        style={{
          ...btnPrimaryStyle,
          opacity: (loading || !productName.trim()) ? 0.5 : 1,
          cursor: (loading || !productName.trim()) ? 'not-allowed' : 'pointer',
        }}
      >
        {loading ? "Forecasting..." : "Generate Forecast"}
      </button>
      {error && <p className="text-sm" style={{ color: 'var(--admin-danger)' }}>{error}</p>}
      {result && (
        <div className="space-y-4">
          <AdminCard className="p-4">
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--admin-text-muted)' }}>Current Trend</p>
            <p className="text-sm" style={{ color: 'var(--admin-text-secondary)', lineHeight: 1.6 }}>{result.currentTrend}</p>
          </AdminCard>
          <div className="grid grid-cols-3 gap-3">
            <AdminCard className="p-4">
              <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Next Stop</p>
              <p className="text-xl font-bold" style={{ color: 'var(--admin-accent)' }}>{result.prediction.nextStopVolume}<span className="text-sm font-normal ml-1" style={{ color: 'var(--admin-text-muted)' }}>units</span></p>
            </AdminCard>
            <AdminCard className="p-4">
              <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Next Week</p>
              <p className="text-xl font-bold" style={{ color: 'var(--admin-accent)' }}>{result.prediction.nextWeekVolume}<span className="text-sm font-normal ml-1" style={{ color: 'var(--admin-text-muted)' }}>units</span></p>
            </AdminCard>
            <AdminCard className="p-4">
              <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--admin-text-muted)' }}>Confidence</p>
              <span 
                className="inline-block rounded-full px-2 py-0.5 text-xs font-bold"
                style={{
                  background: result.prediction.confidence === "high" ? 'rgba(16, 185, 129, 0.1)' : result.prediction.confidence === "medium" ? 'rgba(171, 162, 120, 0.15)' : 'rgba(239, 68, 68, 0.1)',
                  color: result.prediction.confidence === "high" ? '#047857' : result.prediction.confidence === "medium" ? '#92781e' : '#dc2626',
                }}
              >
                {result.prediction.confidence}
              </span>
              <p className="text-xs mt-1" style={{ color: 'var(--admin-text-muted)' }}>{result.prediction.confidenceReason}</p>
            </AdminCard>
          </div>
          <AdminCard className="p-4" style={{ backgroundColor: 'rgba(16, 185, 129, 0.05)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#047857' }}>Recommended Stock</p>
            <p className="text-2xl font-bold" style={{ color: 'var(--admin-text-primary)' }}>{result.recommendedStock.units}<span className="text-sm font-normal ml-1" style={{ color: 'var(--admin-text-muted)' }}>units</span></p>
            <p className="text-sm mt-1" style={{ color: 'var(--admin-text-secondary)' }}>{result.recommendedStock.reasoning}</p>
          </AdminCard>
          {result.seasonalFactors.length > 0 && (
            <AdminCard className="p-4" style={{ backgroundColor: 'rgba(59, 130, 246, 0.05)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#2563eb' }}>Seasonal Factors</p>
              {result.seasonalFactors.map((f) => <p key={f} className="text-sm" style={{ color: '#3b82f6' }}>☀ {f}</p>)}
            </AdminCard>
          )}
          {result.riskFlags.length > 0 && (
            <AdminCard className="p-4" style={{ backgroundColor: 'rgba(171, 162, 120, 0.08)', border: '1px solid rgba(171, 162, 120, 0.2)' }}>
              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: '#92781e' }}>Risk Flags</p>
              {result.riskFlags.map((r) => <p key={r} className="text-sm" style={{ color: '#a6953f' }}>⚠ {r}</p>)}
            </AdminCard>
          )}
          <button type="button" 
            onClick={() => copyToClipboard(JSON.stringify(result, null, 2))} 
            className="text-xs flex items-center gap-1 transition-colors"
            style={{ color: 'var(--admin-text-muted)' }}
          >
            Copy to clipboard
          </button>
        </div>
      )}
    </div>
  );
}

// ── Modal ─────────────────────────────────────────────────────────────────────

type ModalProps = {
  tool: AITool;
  brandId: string;
  brandName: string;
  onClose: () => void;
};

function ToolModal({ tool, brandId, brandName, onClose }: ModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ backgroundColor: 'rgba(60, 56, 37, 0.4)', backdropFilter: 'blur(4px)' }}>
      <AdminCard className="w-full max-w-lg max-h-[85vh] flex flex-col shadow-2xl">
        <div className="flex items-center justify-between px-6 py-4" style={{ borderBottom: '1px solid var(--admin-border)' }}>
          <div className="flex items-center gap-3">
            <span className="text-2xl">{tool.icon}</span>
            <h2 className="text-lg font-bold" style={{ color: 'var(--admin-text-primary)' }}>{tool.title}</h2>
          </div>
          <button type="button" onClick={onClose} className="p-2 transition-colors" style={{ color: 'var(--admin-text-muted)' }}>
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="px-6 py-5 overflow-y-auto flex-1">
          {tool.id === "campaign-writer" && <CampaignWriterTool brandId={brandId} brandName={brandName} />}
          {tool.id === "product-writer" && <ProductWriterTool brandId={brandId} />}
          {tool.id === "report-explainer" && <ReportExplainerTool brandId={brandId} />}
          {tool.id === "pricing-advisor" && <PricingAdvisorTool brandId={brandId} />}
          {tool.id === "stop-blast-advisor" && <StopBlastAdvisorTool brandId={brandId} />}
          {tool.id === "customer-insights" && <CustomerInsightsTool brandId={brandId} />}
          {tool.id === "route-suggester" && <RouteOptimizerTool brandId={brandId} />}
          {tool.id === "demand-forecast" && <DemandForecastTool brandId={brandId} />}
        </div>
      </AdminCard>
    </div>
  );
}

// ── Main Page ─────────────────────────────────────────────────────────────────

export default function AIsettingsClient({ 
  isConnected, 
  brandId, 
  brandName,
  provider = "openai",
  model = "gpt-4o-mini",
  customEndpoint 
}: Props) {
  const [activeTool, setActiveTool] = useState<AITool | null>(null);
  const [activeModule, setActiveModule] = useState<string | null>(null);
  // selectedProvider/currentModel are derived directly from props. We use a
  // `key` on the child components so any prop change fully remounts them and
  // their internal useState(initialProp) re-initializes — no stale copy.
  const selectedProvider = provider;
  const currentModel = model;

  const filteredTools = activeModule ? AI_TOOLS.filter((t) => t.module === activeModule) : AI_TOOLS;
  const modules = [...new Set(AI_TOOLS.map((t) => t.module))];

  const availableCount = AI_TOOLS.filter((t) => t.status === "available").length;

  return (
    <main className="admin-page">
      <div className="admin-container">
        {/* Header with icon */}
        <div className="flex items-center gap-4 mb-6">
          <AIHeaderIcon />
          <div>
            <h1 className="text-3xl font-bold" style={{ color: 'var(--admin-text-primary)' }}>AI Tools</h1>
            <p className="mt-1 text-sm" style={{ color: 'var(--admin-text-muted)' }}>
              AI-assisted features across Harvest Reach, Products, Reports, and more.
            </p>
          </div>
        </div>

        {/* Breadcrumb */}
        <nav className="flex items-center gap-2 text-xs mb-6" style={{ color: 'var(--admin-text-muted)' }}>
          <a href="/admin" style={{ color: 'var(--admin-text-secondary)' }}>Admin</a>
          <span>/</span>
          <a href="/admin/settings" style={{ color: 'var(--admin-text-secondary)' }}>Settings</a>
          <span>/</span>
          <span style={{ color: 'var(--admin-text-secondary)' }}>AI Tools</span>
        </nav>

        {/* Connection Status Banner */}
        <ConnectionStatusBanner 
          isConnected={isConnected} 
          availableCount={availableCount}
          onConfigure={() => window.location.href = '/admin/settings#integrations'}
        />

        {/* Provider Selector */}
        <ProviderSelector
          currentProvider={selectedProvider}
          currentModel={currentModel}
          brandId={brandId}
          onSelect={() => {
            // Local state is derived from `provider` prop. After a server
            // refresh the new provider flows in via the parent re-render.
          }}
        />

        {/* Model Input */}
        <ModelInput
          key={currentModel}
          currentModel={currentModel}
          brandId={brandId}
          onChange={() => {
            // Local state is derived from `model` prop. `key={currentModel}`
            // remounts this component so its internal useState(currentModel)
            // re-syncs to the new value.
          }}
        />

        {/* Module filter */}
        <div className="admin-filter-tabs mb-6">
          <button type="button"
            onClick={() => setActiveModule(null)}
            className={`admin-filter-tab ${activeModule === null ? 'admin-filter-tab--active' : ''}`}
          >
            All ({AI_TOOLS.length})
          </button>
          {modules.map((m) => {
            const count = AI_TOOLS.filter((t) => t.module === m).length;
            return (
              <button type="button"
                key={m}
                onClick={() => setActiveModule(activeModule === m ? null : m)}
                className={`admin-filter-tab ${activeModule === m ? 'admin-filter-tab--active' : ''}`}
              >
                {m} ({count})
              </button>
            );
          })}
        </div>

        {/* Tool Cards */}
        <div className="grid gap-5 md:grid-cols-2">
          {filteredTools.map((tool) => (
            <ToolCard
              key={tool.id}
              tool={tool}
              isConnected={isConnected}
              onOpen={setActiveTool}
            />
          ))}
        </div>

        {/* Info box */}
        <AdminCard className="mt-8 p-5" style={{ 
          background: 'rgba(202, 117, 67, 0.05)',
          border: '1px solid rgba(202, 117, 67, 0.15)',
        }}>
          <h3 className="text-sm font-semibold mb-2" style={{ color: '#8c4c27' }}>About AI in Route Commerce</h3>
          <p className="text-sm" style={{ color: '#a0694f', lineHeight: 1.6 }}>
            AI tools process your data locally — orders, products, stops, and contacts — and send requests to your configured AI provider.
            No data is stored or shared beyond the generation request. Experimental features may require additional setup.
          </p>
        </AdminCard>
      </div>

      {/* Tool Modal */}
      {activeTool && (
        <ToolModal
          tool={activeTool}
          brandId={brandId}
          brandName={brandName}
          onClose={() => setActiveTool(null)}
        />
      )}
    </main>
  );
}