'use client';

import React, { useMemo, useState } from 'react';

/**
 * Avatar G — Workspace (Home)
 * File: app/page.tsx
 * Requires: Tailwind CSS enabled (create-next-app with Tailwind)
 * Optional: add gradient background in globals.css (I’ll give after if needed)
 */

type ServiceKey = 'avatar' | 'voice' | 'image' | 'video' | 'music' | 'production';

type Service = {
  key: ServiceKey;
  title: string;
  subtitle: string;
  icon: string; // emoji placeholder (later swap to real icons)
  accent: 'cyan' | 'emerald' | 'violet' | 'orange' | 'blue' | 'pink';
};

type AssetType = 'avatar' | 'voice' | 'image' | 'video' | 'music' | 'project';

type HistoryItem = {
  id: string;
  createdAt: string;
  service: ServiceKey;
  title: string;
  promptSummary: string;
  status: 'ready' | 'processing' | 'error';
};

type LibraryItem = {
  id: string;
  type: AssetType;
  title: string;
  createdAt: string;
  sizeLabel?: string;
};

type ChatMessage = {
  id: string;
  role: 'user' | 'assistant' | 'system';
  text: string;
  createdAt: string;
};

const SERVICES: Service[] = [
  {
    key: 'avatar',
    title: 'Avatar Builder',
    subtitle: 'Identity • Live Camera • Style Engine',
    icon: '👤',
    accent: 'emerald'
  },
  {
    key: 'voice',
    title: 'Voice Lab',
    subtitle: 'Accent • Cloning • Emotional Tone',
    icon: '🎙️',
    accent: 'cyan'
  },
  {
    key: 'image',
    title: 'Image Architect',
    subtitle: '8K • Brand Kit • Lighting Control',
    icon: '🎨',
    accent: 'violet'
  },
  {
    key: 'video',
    title: 'Video Cine-Lab',
    subtitle: 'Camera Path • Motion • VFX',
    icon: '📽️',
    accent: 'orange'
  },
  {
    key: 'music',
    title: 'Music Studio',
    subtitle: 'BPM Sync • Genre Morph • Lyrics-to-Audio',
    icon: '🎵',
    accent: 'blue'
  },
  {
    key: 'production',
    title: 'AI Production',
    subtitle: 'Timeline • Lip-Sync • One-Click Remix',
    icon: '🎬',
    accent: 'pink'
  }
];

function nowLabel() {
  const d = new Date();
  return d.toLocaleString(undefined, {
    day: '2-digit',
    month: 'short',
    hour: '2-digit',
    minute: '2-digit'
  });
}

function uid(prefix = 'id') {
  return `${prefix}_${Math.random().toString(16).slice(2)}_${Date.now()}`;
}

function accentClasses(accent: Service['accent']) {
  // No hard colors requested by user; using Tailwind primitives with subtle accents
  // Keep it premium & restrained.
  switch (accent) {
    case 'emerald':
      return 'from-emerald-400/20 to-emerald-200/5 ring-emerald-200/20';
    case 'cyan':
      return 'from-cyan-400/20 to-cyan-200/5 ring-cyan-200/20';
    case 'violet':
      return 'from-violet-400/20 to-violet-200/5 ring-violet-200/20';
    case 'orange':
      return 'from-orange-400/20 to-orange-200/5 ring-orange-200/20';
    case 'blue':
      return 'from-blue-400/20 to-blue-200/5 ring-blue-200/20';
    case 'pink':
      return 'from-pink-400/20 to-pink-200/5 ring-pink-200/20';
    default:
      return 'from-white/10 to-white/5 ring-white/10';
  }
}

export default function Page() {
  // Global App State (V2 simple local state; later swap to Zustand/Redux)
  const [activeService, setActiveService] = useState<Service | null>(null);
  const [chatTab, setChatTab] = useState<'chat' | 'history' | 'library'>('chat');
  const [status, setStatus] = useState<'idle' | 'processing' | 'error'>('idle');

  const [credits, setCredits] = useState<number>(1250);
  const [storageUsedGb, setStorageUsedGb] = useState<number>(1.2);
  const storageTotalGb = 5;

  const [messages, setMessages] = useState<ChatMessage[]>(() => [
    {
      id: uid('m'),
      role: 'system',
      text: 'Welcome to Avatar G Workspace. Select a service or ask the AI Helper to build a professional prompt.',
      createdAt: nowLabel()
    }
  ]);

  const [history, setHistory] = useState<HistoryItem[]>(() => [
    {
      id: uid('h'),
      createdAt: nowLabel(),
      service: 'music',
      title: 'Music: Corporate ambient (Draft)',
      promptSummary: 'Genre: Corporate • Mood: Calm • BPM: Auto • Instrument: Synth',
      status: 'ready'
    },
    {
      id: uid('h'),
      createdAt: nowLabel(),
      service: 'avatar',
      title: 'Avatar: Business male (Draft)',
      promptSummary: 'Region: Tbilisi • Style: Business • Lighting: Soft Studio',
      status: 'ready'
    }
  ]);

  const [library, setLibrary] = useState<LibraryItem[]>(() => [
    { id: uid('a'), type: 'image', title: 'Background: Modern Office', createdAt: nowLabel(), sizeLabel: '4.8MB' },
    { id: uid('a'), type: 'voice', title: 'Voice: Tbilisi soft', createdAt: nowLabel(), sizeLabel: '2.1MB' },
    { id: uid('a'), type: 'music', title: 'Track: Calm corporate loop', createdAt: nowLabel(), sizeLabel: '7.4MB' }
  ]);

  const filteredHistory = useMemo(() => history, [history]);
  const filteredLibrary = useMemo(() => library, [library]);

  function pushSystemLog(text: string) {
    setMessages((prev) => [
      ...prev,
      { id: uid('m'), role: 'system', text, createdAt: nowLabel() }
    ]);
  }

  function sendMessage(text: string) {
    if (!text.trim()) return;
    setMessages((prev) => [
      ...prev,
      { id: uid('m'), role: 'user', text: text.trim(), createdAt: nowLabel() }
    ]);

    // Simulated assistant response (replace with real API later)
    setStatus('processing');
    setTimeout(() => {
      setMessages((prev) => [
        ...prev,
        {
          id: uid('m'),
          role: 'assistant',
          text:
            "Got it. I can convert that into a professional prompt. Tell me: platform (Reels/TikTok/YouTube), tone (business/cinematic/fun), and language (KA/EN/RU).",
          createdAt: nowLabel()
        }
      ]);
      setStatus('idle');
    }, 650);
  }

  function simulateGenerate(service: Service) {
    // This is UI-only: creates history + consumes credits + adds library item.
    setStatus('processing');
    pushSystemLog(`[boot] ${service.title}: processing request...`);
    setCredits((c) => Math.max(0, c - 12));

    setTimeout(() => {
      const newHistory: HistoryItem = {
        id: uid('h'),
        createdAt: nowLabel(),
        service: service.key,
        title: `${service.title}: New output`,
        promptSummary: 'Generated via Prompt Builder • (demo)',
        status: 'ready'
      };
      setHistory((prev) => [newHistory, ...prev]);

      const newAsset: LibraryItem = {
        id: uid('a'),
        type:
          service.key === 'avatar'
            ? 'avatar'
            : service.key === 'voice'
              ? 'voice'
              : service.key === 'image'
                ? 'image'
                : service.key === 'video'
                  ? 'video'
                  : service.key === 'music'
                    ? 'music'
                    : 'project',
        title: `${service.title} Output`,
        createdAt: nowLabel(),
        sizeLabel: '—'
      };
      setLibrary((prev) => [newAsset, ...prev]);

      setStorageUsedGb((gb) => Math.min(storageTotalGb, +(gb + 0.05).toFixed(2)));
      pushSystemLog(`[ok] ${service.title}: done. Saved to Library + History.`);
      setStatus('idle');
    }, 900);
  }

  function attachFromHistory(item: HistoryItem) {
    pushSystemLog(`[attach] History → Chat: "${item.title}"`);
    setChatTab('chat');
    setMessages((prev) => [
      ...prev,
      {
        id: uid('m'),
        role: 'system',
        text: `Attached from History: ${item.title} — ${item.promptSummary}`,
        createdAt: nowLabel()
      }
    ]);
  }

  function attachFromLibrary(item: LibraryItem) {
    pushSystemLog(`[attach] Library → Chat: "${item.title}"`);
    setChatTab('chat');
    setMessages((prev) => [
      ...prev,
      {
        id: uid('m'),
        role: 'system',
        text: `Attached from Library: ${item.type.toUpperCase()} — ${item.title}`,
        createdAt: nowLabel()
      }
    ]);
  }

  return (
    <div className="min-h-screen text-white">
      {/* Background */}
      <div className="fixed inset-0 -z-10 bg-gradient-to-b from-[#050505] via-[#071428] to-[#0a192f]" />
      <div className="fixed inset-0 -z-10 opacity-40 [background:radial-gradient(1200px_circle_at_20%_10%,rgba(0,210,255,0.16),transparent_55%),radial-gradient(900px_circle_at_80%_35%,rgba(180,90,255,0.14),transparent_55%),radial-gradient(1100px_circle_at_60%_90%,rgba(255,120,180,0.10),transparent_60%)]" />

      <div className="mx-auto flex min-h-screen w-full max-w-[1400px] gap-4 px-4 py-4 md:px-6">
        {/* Sidebar */}
        <aside className="hidden w-[76px] flex-col md:flex">
          <GlassCard className="h-full p-2">
            <div className="flex flex-col items-center gap-3 py-2">
              <LogoMark />
              <div className="mt-1 h-px w-full bg-white/10" />
              {SERVICES.map((s) => (
                <SidebarIcon
                  key={s.key}
                  icon={s.icon}
                  label={s.title}
                  active={activeService?.key === s.key}
                  onClick={() => {
                    setActiveService(s);
                    pushSystemLog(`[ui] Open service: ${s.title}`);
                  }}
                />
              ))}
            </div>
            <div className="mt-auto px-2 pb-2">
              <div className="mt-3 rounded-xl border border-white/10 bg-white/5 p-2 text-center text-xs text-white/70">
                <div className="font-semibold text-white/90">API</div>
                <div className="mt-1">
                  <span className="inline-flex items-center gap-1">
                    <span
                      className={[
                        'h-2 w-2 rounded-full',
                        status === 'idle' ? 'bg-emerald-400' : status === 'processing' ? 'bg-cyan-300' : 'bg-rose-400'
                      ].join(' ')}
                    />
                    {status}
                  </span>
                </div>
              </div>
            </div>
          </GlassCard>
        </aside>

        {/* Main Column */}
        <main className="flex min-w-0 flex-1 flex-col gap-4">
          {/* Top Bar */}
          <GlassCard className="px-4 py-3">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div className="flex items-center gap-3">
                <div className="md:hidden">
                  <LogoMark />
                </div>
                <div>
                  <div className="text-sm font-semibold tracking-wide text-white/90">Avatar G — AI Workspace</div>
                  <div className="text-xs text-white/55">The Neural Station • Glass UI • Silver Borders • Live Helper</div>
                </div>
              </div>

              <div className="flex items-center gap-2">
                <StatPill label="Credits" value={`${credits} CR`} />
                <StatPill
                  label="Storage"
                  value={`${storageUsedGb.toFixed(1)}GB / ${storageTotalGb}GB`}
                />
                <button
                  className="rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-xs font-semibold text-white/80 hover:bg-white/10"
                  onClick={() => {
                    pushSystemLog('[ui] Open: Global Library');
                    setChatTab('library');
                  }}
                >
                  Open Library
                </button>
              </div>
            </div>
          </GlassCard>

          {/* Workspace Grid */}
          <div className="grid gap-4 lg:grid-cols-[1fr_420px]">
            <div className="min-w-0">
              <GlassCard className="p-4">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <div className="text-lg font-semibold">Workspace Grid</div>
                    <div className="text-sm text-white/60">
                      Pick a service. Each service has Prompt Builder + Library + Generate/View/Play/Download/Upload.
                    </div>
                  </div>

                  <button
                    className="rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-xs font-semibold text-white/80 hover:bg-white/10"
                    onClick={() => {
                      setActiveService(null);
                      pushSystemLog('[ui] Closed service overlay');
                    }}
                  >
                    Close Overlay
                  </button>
                </div>

                <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                  {SERVICES.map((s) => (
                    <ServiceCard
                      key={s.key}
                      service={s}
                      onOpen={() => {
                        setActiveService(s);
                        pushSystemLog(`[ui] Open service: ${s.title}`);
                      }}
                    />
                  ))}
                </div>

                <div className="mt-4 grid gap-3 md:grid-cols-2">
                  <GlassCard className="p-4">
                    <div className="text-sm font-semibold text-white/85">Smart Templates</div>
                    <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
                      <QuickTemplate
                        title="Business Promo"
                        onClick={() => sendMessage('Build a Business Promo prompt pack: avatar + voice + background + music.')}
                      />
                      <QuickTemplate
                        title="Holiday Greeting"
                        onClick={() => sendMessage('Create a Holiday Greeting template: warm tone, festive visuals, short 9:16.')}
                      />
                      <QuickTemplate
                        title="Breaking News"
                        onClick={() => sendMessage('Generate a Breaking News style prompt: studio look, confident voice, captions.')}
                      />
                      <QuickTemplate
                        title="Surprise Me"
                        onClick={() => sendMessage('Auto-fill the best settings for a premium cinematic ad in Georgian.')}
                      />
                    </div>
                  </GlassCard>

                  <GlassCard className="p-4">
                    <div className="text-sm font-semibold text-white/85">System Console</div>
                    <div className="mt-2 text-xs text-white/60">
                      Live logs appear here and in Chat. This will later mirror backend job statuses.
                    </div>
                    <div className="mt-3 flex flex-wrap gap-2">
                      <MiniBadge text={`Status: ${status}`} />
                      <MiniBadge text="Realtime: Supabase (later)" />
                      <MiniBadge text="Drag & Drop: enabled (UI)" />
                      <MiniBadge text="Modal services: overlay" />
                    </div>
                  </GlassCard>
                </div>
              </GlassCard>
            </div>

            {/* Persistent Chat Dock */}
            <ChatDock
              tab={chatTab}
              setTab={setChatTab}
              status={status}
              messages={messages}
              history={filteredHistory}
              library={filteredLibrary}
              onSend={sendMessage}
              onAttachHistory={attachFromHistory}
              onAttachLibrary={attachFromLibrary}
            />
          </div>
        </main>
      </div>

      {/* Service Overlay Modal */}
      {activeService && (
        <Modal onClose={() => setActiveService(null)}>
          <div className="flex flex-col gap-4">
            <div className="flex items-start justify-between gap-3">
              <div>
                <div className="text-lg font-semibold">{activeService.title}</div>
                <div className="text-sm text-white/60">{activeService.subtitle}</div>
              </div>
              <button
                className="rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-xs font-semibold text-white/80 hover:bg-white/10"
                onClick={() => setActiveService(null)}
              >
                Close
              </button>
            </div>

            <div className="grid gap-3 lg:grid-cols-2">
              <GlassCard className="p-4">
                <div className="flex items-center justify-between">
                  <div className="text-sm font-semibold text-white/85">Prompt Builder</div>
                  <span className="rounded-full border border-white/15 bg-white/5 px-2 py-1 text-[11px] text-white/70">
                    Demo UI
                  </span>
                </div>
                <div className="mt-3 grid gap-2">
                  <Field label="Goal">
                    <select className="w-full rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-sm outline-none">
                      <option>Professional Ad</option>
                      <option>Social Short</option>
                      <option>Corporate Explainer</option>
                      <option>Creative Story</option>
                    </select>
                  </Field>
                  <Field label="Tone">
                    <select className="w-full rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-sm outline-none">
                      <option>Premium</option>
                      <option>Cinematic</option>
                      <option>Friendly</option>
                      <option>Bold</option>
                    </select>
                  </Field>
                  <Field label="Language">
                    <select className="w-full rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-sm outline-none">
                      <option>Georgian (KA)</option>
                      <option>English (EN)</option>
                      <option>Russian (RU)</option>
                    </select>
                  </Field>
                  <Field label="Notes (optional)">
                    <textarea
                      className="min-h-[90px] w-full rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-sm outline-none"
                      placeholder="Describe your idea…"
                    />
                  </Field>
                </div>

                <div className="mt-4 flex flex-wrap gap-2">
                  <PrimaryButton
                    onClick={() => {
                      simulateGenerate(activeService);
                      setChatTab('history');
                    }}
                    label="Generate"
                  />
                  <GhostButton
                    onClick={() => {
                      pushSystemLog(`[insert] Prompt → Chat: ${activeService.title} (demo)`);
                      setChatTab('chat');
                      setMessages((prev) => [
                        ...prev,
                        {
                          id: uid('m'),
                          role: 'system',
                          text: `Insert to Chat: ${activeService.title} prompt (demo)`,
                          createdAt: nowLabel()
                        }
                      ]);
                    }}
                    label="Insert to Chat"
                  />
                  <GhostButton
                    onClick={() => pushSystemLog(`[upload] ${activeService.title}: upload requested (demo)`)}
                    label="Upload / Drag & Drop"
                  />
                </div>
              </GlassCard>

              <GlassCard className="p-4">
                <div className="flex items-center justify-between">
                  <div className="text-sm font-semibold text-white/85">Library</div>
                  <span className="text-xs text-white/60">View • Play • Download • Attach</span>
                </div>
                <div className="mt-3 space-y-2">
                  {filteredLibrary.slice(0, 6).map((it) => (
                    <LibraryRow
                      key={it.id}
                      item={it}
                      onAttach={() => attachFromLibrary(it)}
                      onDownload={() => pushSystemLog(`[download] ${it.title} (demo)`)}
                      onView={() => pushSystemLog(`[view] ${it.title} (demo)`)}
                    />
                  ))}
                </div>
                <div className="mt-4 flex gap-2">
                  <GhostButton onClick={() => setChatTab('library')} label="Open Global Library" />
                  <GhostButton onClick={() => setChatTab('history')} label="Open History" />
                </div>
              </GlassCard>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ---------------------------
   UI Components (single-file)
---------------------------- */

function GlassCard({ className = '', children }: { className?: string; children: React.ReactNode }) {
  return (
    <div
      className={[
        'rounded-2xl border border-white/15 bg-white/5 shadow-[0_10px_30px_rgba(0,0,0,0.35)] backdrop-blur-[20px]',
        // "silver metallic border" vibe:
        'ring-1 ring-white/10',
        className
      ].join(' ')}
    >
      {children}
    </div>
  );
}

function LogoMark() {
  return (
    <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/15 bg-white/5 text-lg shadow-inner">
      🤖
    </div>
  );
}

function SidebarIcon({
  icon,
  label,
  active,
  onClick
}: {
  icon: string;
  label: string;
  active?: boolean;
  onClick?: () => void;
}) {
  return (
    <button
      title={label}
      onClick={onClick}
      className={[
        'flex h-11 w-11 items-center justify-center rounded-2xl border transition',
        active ? 'border-white/30 bg-white/10' : 'border-white/10 bg-white/5 hover:bg-white/10'
      ].join(' ')}
    >
      <span className="text-lg">{icon}</span>
    </button>
  );
}

function StatPill({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-xl border border-white/15 bg-white/5 px-3 py-2">
      <div className="text-[10px] uppercase tracking-wider text-white/50">{label}</div>
      <div className="text-xs font-semibold text-white/85">{value}</div>
    </div>
  );
}

function ServiceCard({ service, onOpen }: { service: Service; onOpen: () => void }) {
  const ring = accentClasses(service.accent);
  return (
    <button
      onClick={onOpen}
      className={[
        'group relative overflow-hidden rounded-2xl border border-white/15 bg-white/5 p-4 text-left transition',
        'hover:bg-white/10'
      ].join(' ')}
    >
      <div className={['pointer-events-none absolute inset-0 bg-gradient-to-br opacity-0 transition group-hover:opacity-100', ring].join(' ')} />
      <div className="relative flex items-start justify-between gap-3">
        <div className="flex items-center gap-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-2xl border border-white/15 bg-white/5 text-xl">
            {service.icon}
          </div>
          <div>
            <div className="text-sm font-semibold text-white/90">{service.title}</div>
            <div className="text-xs text-white/55">{service.subtitle}</div>
          </div>
        </div>
        <span className="relative mt-1 rounded-full border border-white/15 bg-white/5 px-2 py-1 text-[11px] text-white/70">
          Open
        </span>
      </div>

      <div className="relative mt-3 flex flex-wrap gap-2">
        <MiniBadge text="Prompt Builder" />
        <MiniBadge text="Library" />
        <MiniBadge text="Generate" />
        <MiniBadge text="Upload" />
      </div>
    </button>
  );
}

function MiniBadge({ text }: { text: string }) {
  return (
    <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-white/65">
      {text}
    </span>
  );
}

function QuickTemplate({ title, onClick }: { title: string; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-white/80 hover:bg-white/10"
    >
      {title}
    </button>
  );
}

function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <button
        aria-label="Close overlay"
        className="absolute inset-0 bg-black/60"
        onClick={onClose}
      />
      <div className="relative w-full max-w-4xl">
        <GlassCard className="p-5">{children}</GlassCard>
      </div>
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="grid gap-1">
      <div className="text-xs font-semibold text-white/70">{label}</div>
      {children}
    </div>
  );
}

function PrimaryButton({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className={[
        'rounded-xl px-4 py-2 text-sm font-semibold',
        'bg-gradient-to-r from-cyan-400/80 to-blue-500/80',
        'border border-white/15 hover:brightness-110'
      ].join(' ')}
    >
      {label}
    </button>
  );
}

function GhostButton({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="rounded-xl border border-white/15 bg-white/5 px-4 py-2 text-sm font-semibold text-white/80 hover:bg-white/10"
    >
      {label}
    </button>
  );
}

/* ---------------------------
   Chat Dock (Live / History / Library)
---------------------------- */

function ChatDock(props: {
  tab: 'chat' | 'history' | 'library';
  setTab: (t: 'chat' | 'history' | 'library') => void;
  status: 'idle' | 'processing' | 'error';
  messages: ChatMessage[];
  history: HistoryItem[];
  library: LibraryItem[];
  onSend: (text: string) => void;
  onAttachHistory: (item: HistoryItem) => void;
  onAttachLibrary: (item: LibraryItem) => void;
}) {
  const { tab, setTab, status, messages, history, library, onSend, onAttachHistory, onAttachLibrary } = props;
  const [draft, setDraft] = useState('');

  return (
    <GlassCard className="min-w-0 p-4">
      <div className="flex items-center justify-between gap-3">
        <div>
          <div className="text-sm font-semibold text-white/90">AI Helper</div>
          <div className="text-xs text-white/55">Persistent assistant • logs • attachments</div>
        </div>
        <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs text-white/70">
          <span
            className={[
              'h-2 w-2 rounded-full',
              status === 'idle' ? 'bg-emerald-400' : status === 'processing' ? 'bg-cyan-300' : 'bg-rose-400'
            ].join(' ')}
          />
          {status}
        </span>
      </div>

      <div className="mt-3 flex gap-2">
        <TabButton active={tab === 'chat'} onClick={() => setTab('chat')} label="Live Chat" />
        <TabButton active={tab === 'history'} onClick={() => setTab('history')} label="History" />
        <TabButton active={tab === 'library'} onClick={() => setTab('library')} label="Library" />
      </div>

      <div className="mt-3 min-h-[420px]">
        {tab === 'chat' && (
          <div className="flex h-[420px] flex-col">
            <div className="flex-1 space-y-2 overflow-auto rounded-2xl border border-white/10 bg-white/5 p-3">
              {messages.map((m) => (
                <ChatBubble key={m.id} msg={m} />
              ))}
            </div>

            <div className="mt-3 flex gap-2">
              <input
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                placeholder="Ask AI Helper… (e.g., build a pro prompt for a 9:16 ad)"
                className="flex-1 rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-sm outline-none placeholder:text-white/40"
              />
              <button
                onClick={() => {
                  onSend(draft);
                  setDraft('');
                }}
                className="rounded-xl border border-white/15 bg-gradient-to-r from-cyan-400/80 to-blue-500/80 px-4 py-2 text-sm font-semibold hover:brightness-110"
              >
                Send
              </button>
            </div>

            <div className="mt-2 flex flex-wrap gap-2 text-xs">
              <QuickChip text="Optimize my prompt" onClick={() => onSend('Optimize my last prompt to be professional and detailed.')} />
              <QuickChip text="Surprise me" onClick={() => onSend('Auto-fill the best settings for premium results.')} />
              <QuickChip text="Make it TikTok-ready" onClick={() => onSend('Adapt this for TikTok/Reels: fast hook + captions + 9:16.')} />
              <QuickChip text="Insert to Music" onClick={() => onSend('Generate a Music prompt builder output: corporate cinematic, 110 BPM, loop.')} />
            </div>
          </div>
        )}

        {tab === 'history' && (
          <div className="h-[420px] overflow-auto rounded-2xl border border-white/10 bg-white/5 p-3">
            <div className="mb-2 text-xs text-white/60">
              All activities by service • attach prompt + output back to Chat.
            </div>
            <div className="space-y-2">
              {history.map((h) => (
                <HistoryRow
                  key={h.id}
                  item={h}
                  onAttach={() => onAttachHistory(h)}
                  onCopyPrompt={() => navigator.clipboard?.writeText(h.promptSummary)}
                />
              ))}
            </div>
          </div>
        )}

        {tab === 'library' && (
          <div className="h-[420px] overflow-auto rounded-2xl border border-white/10 bg-white/5 p-3">
            <div className="mb-2 text-xs text-white/60">
              Global assets • view/play/download/attach (demo UI).
            </div>
            <div className="space-y-2">
              {library.map((it) => (
                <LibraryRow
                  key={it.id}
                  item={it}
                  onAttach={() => onAttachLibrary(it)}
                  onDownload={() => {}}
                  onView={() => {}}
                />
              ))}
            </div>
          </div>
        )}
      </div>
    </GlassCard>
  );
}

function TabButton({ active, label, onClick }: { active: boolean; label: string; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className={[
        'rounded-xl border px-3 py-2 text-xs font-semibold transition',
        active
          ? 'border-white/25 bg-white/10 text-white/90'
          : 'border-white/10 bg-white/5 text-white/70 hover:bg-white/10'
      ].join(' ')}
    >
      {label}
    </button>
  );
}

function ChatBubble({ msg }: { msg: ChatMessage }) {
  const isUser = msg.role === 'user';
  const isSystem = msg.role === 'system';

  return (
    <div className={['flex', isUser ? 'justify-end' : 'justify-start'].join(' ')}>
      <div
        className={[
          'max-w-[92%] rounded-2xl border px-3 py-2 text-sm',
          isUser
            ? 'border-white/15 bg-gradient-to-br from-cyan-400/15 to-blue-500/10'
            : isSystem
              ? 'border-white/10 bg-white/5 text-white/75'
              : 'border-white/12 bg-white/7'
        ].join(' ')}
      >
        <div className="text-[11px] text-white/50">{msg.createdAt}</div>
        <div className="mt-1 whitespace-pre-wrap text-white/90">{msg.text}</div>
      </div>
    </div>
  );
}

function QuickChip({ text, onClick }: { text: string; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-white/70 hover:bg-white/10"
    >
      {text}
    </button>
  );
}

function HistoryRow({
  item,
  onAttach,
  onCopyPrompt
}: {
  item: HistoryItem;
  onAttach: () => void;
  onCopyPrompt: () => void;
}) {
  return (
    <div className="flex items-start justify-between gap-2 rounded-2xl border border-white/10 bg-white/5 p-3">
      <div className="min-w-0">
        <div className="flex items-center gap-2">
          <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-white/65">
            {item.service.toUpperCase()}
          </span>
          <span className="text-[11px] text-white/50">{item.createdAt}</span>
          <span
            className={[
              'ml-auto hidden rounded-full px-2 py-1 text-[11px] sm:inline-flex',
              item.status === 'ready'
                ? 'bg-emerald-400/10 text-emerald-200'
                : item.status === 'processing'
                  ? 'bg-cyan-400/10 text-cyan-200'
                  : 'bg-rose-400/10 text-rose-200'
            ].join(' ')}
          >
            {item.status}
          </span>
        </div>
        <div className="mt-1 truncate text-sm font-semibold text-white/90">{item.title}</div>
        <div className="mt-1 line-clamp-2 text-xs text-white/60">{item.promptSummary}</div>
      </div>

      <div className="flex shrink-0 flex-col gap-2">
        <button
          onClick={onAttach}
          className="rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-xs font-semibold text-white/80 hover:bg-white/10"
        >
          Attach
        </button>
        <button
          onClick={onCopyPrompt}
          className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-xs text-white/70 hover:bg-white/10"
        >
          Copy Prompt
        </button>
      </div>
    </div>
  );
}

function LibraryRow({
  item,
  onAttach,
  onView,
  onDownload
}: {
  item: LibraryItem;
  onAttach: () => void;
  onView: () => void;
  onDownload: () => void;
}) {
  return (
    <div className="flex items-center justify-between gap-2 rounded-2xl border border-white/10 bg-white/5 p-3">
      <div className="min-w-0">
        <div className="flex items-center gap-2">
          <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-white/65">
            {item.type.toUpperCase()}
          </span>
          <span className="text-[11px] text-white/50">{item.createdAt}</span>
          {item.sizeLabel && <span className="text-[11px] text-white/45">{item.sizeLabel}</span>}
        </div>
        <div className="mt-1 truncate text-sm font-semibold text-white/90">{item.title}</div>
      </div>

      <div className="flex shrink-0 gap-2">
        <button
          onClick={onView}
          className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-xs text-white/70 hover:bg-white/10"
        >
          View
        </button>
        <button
          onClick={onDownload}
          className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-xs text-white/70 hover:bg-white/10"
        >
          Download
        </button>
        <button
          onClick={onAttach}
          className="rounded-xl border border-white/15 bg-white/5 px-3 py-2 text-xs font-semibold text-white/80 hover:bg-white/10"
        >
          Attach
        </button>
      </div>
    </div>
  );
}