'use client';

import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { Play, CheckCircle, AlertTriangle, Loader2, Terminal, ChevronDown } from 'lucide-react';
import { Message } from '@/lib/chat-session';

const ReactMarkdown = dynamic(() => import('react-markdown'), { ssr: false });
const SqlViewer = dynamic(() => import('@/components/sql-viewer').then((mod) => mod.SqlViewer), {
  ssr: false,
  loading: () => <div className="text-xs text-warm-400 dark:text-warm-500">Loading SQL...</div>,
});
const ResultTable = dynamic(() => import('@/components/result-table').then((mod) => mod.ResultTable), {
  ssr: false,
  loading: () => <div className="text-xs text-warm-400 dark:text-warm-500">Loading results...</div>,
});

type MessageBubbleContentProps = {
  msg: Message;
  index: number;
  onExecute: (index: number, sql: string) => void;
};

export const MessageBubbleContent = ({ msg, index, onExecute }: MessageBubbleContentProps) => {
  const [isSqlOpen, setIsSqlOpen] = useState(true);
  const [isExplanationOpen, setIsExplanationOpen] = useState(false);

  useEffect(() => {
    if (msg.queryResult && !msg.queryResult.error) {
      setIsSqlOpen(false);
    }
  }, [msg.queryResult]);

  return (
    <>
      {(msg.content || msg.sql) && (
        <div className="px-5 pb-3">
          {msg.content && (
            <div
              className="flex items-center gap-2 cursor-pointer group/toggle py-2 -mx-2 px-2 rounded-lg hover:bg-cream-100 dark:hover:bg-warm-700/50 transition-colors"
              onClick={() => setIsExplanationOpen(!isExplanationOpen)}
            >
              <ChevronDown
                className={`w-4 h-4 text-warm-400 transition-transform duration-200 ${isExplanationOpen ? 'rotate-0' : '-rotate-90'}`}
              />
              <span className="text-sm font-medium text-warm-600 dark:text-warm-300 group-hover/toggle:text-warm-800 dark:group-hover/toggle:text-cream-100 transition-colors">
                Analysis Logic
              </span>
            </div>
          )}

          <div
            className={`overflow-hidden transition-all duration-300 ease-in-out ${
              isExplanationOpen || !msg.sql ? 'max-h-[2000px] opacity-100 mt-3' : 'max-h-0 opacity-0'
            }`}
          >
            <div className="prose dark:prose-invert prose-sm max-w-none text-warm-600 dark:text-warm-300 leading-relaxed pl-6
              prose-p:leading-relaxed prose-headings:font-semibold prose-headings:text-warm-800 dark:prose-headings:text-cream-100
              prose-code:bg-cream-200 dark:prose-code:bg-warm-700 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:text-accent dark:prose-code:text-accent-300 prose-code:before:content-none prose-code:after:content-none
            ">
              <ReactMarkdown>{msg.content}</ReactMarkdown>
            </div>
          </div>
        </div>
      )}

      {msg.sql && (
        <div className="border-t border-cream-200 dark:border-warm-700">
          <div
            className="px-5 py-3 flex items-center gap-2 cursor-pointer hover:bg-cream-100 dark:hover:bg-warm-700/50 transition-colors group/sql"
            onClick={() => setIsSqlOpen(!isSqlOpen)}
          >
            <ChevronDown className={`w-4 h-4 text-warm-400 transition-transform duration-200 ${isSqlOpen ? 'rotate-0' : '-rotate-90'}`} />
            <Terminal className="w-4 h-4 text-accent" />
            <span className="text-sm font-medium text-warm-600 dark:text-warm-300 group-hover/sql:text-warm-800 dark:group-hover/sql:text-cream-100 transition-colors">
              BigQuery SQL
            </span>
          </div>

          {isSqlOpen && (
            <div className="px-5 pb-5 animate-fade-in">
              <SqlViewer sql={msg.sql} />
            </div>
          )}
        </div>
      )}

      {msg.sql && (
        <div className="px-5 py-3 border-t border-cream-200 dark:border-warm-700 flex flex-wrap items-center gap-3 justify-between">
          <div className="flex items-center gap-3">
            {msg.isDryRunning ? (
              <div className="flex items-center gap-2 text-xs font-medium text-warm-500 animate-pulse">
                <Loader2 className="w-3.5 h-3.5 animate-spin" />
                <span>Validating...</span>
              </div>
            ) : msg.dryRun ? (
              msg.dryRun.valid ? (
                <div className="flex items-center gap-1.5 text-xs font-medium text-green-600 dark:text-green-400">
                  <CheckCircle className="w-3.5 h-3.5" />
                  <span>Valid • {msg.dryRun.formattedSize}</span>
                </div>
              ) : (
                <div className="flex items-center gap-1.5 text-xs font-medium text-red-500 dark:text-red-400">
                  <AlertTriangle className="w-3.5 h-3.5" />
                  <span>Invalid</span>
                </div>
              )
            ) : null}
          </div>

          {!msg.queryResult && !msg.isExecuting && msg.dryRun?.valid && (
            <button
              type="button"
              onClick={() => onExecute(index, msg.sql!)}
              className="inline-flex items-center gap-1.5 text-xs font-medium text-warm-600 dark:text-warm-300 hover:text-accent dark:hover:text-accent transition-colors"
            >
              <Play className="w-3.5 h-3.5" />
              Run Query
            </button>
          )}

          {msg.isExecuting && (
            <div className="flex items-center gap-1.5 text-xs font-medium text-accent animate-pulse">
              <Loader2 className="w-3.5 h-3.5 animate-spin" />
              <span>Running...</span>
            </div>
          )}
        </div>
      )}

      {msg.queryResult && (
        <div className="border-t border-cream-200 dark:border-warm-700">
          {msg.queryResult.error ? (
            <div className="p-5">
              <div className="flex items-center gap-2 mb-2 text-red-500 dark:text-red-400 text-sm">
                <AlertTriangle className="w-4 h-4" />
                <span className="font-medium">Error</span>
              </div>
              <p className="text-xs font-mono text-red-500/80 dark:text-red-400/80 break-all pl-6">{msg.queryResult.error}</p>
            </div>
          ) : (
            <div className="animate-slide-up p-5">
              <ResultTable data={msg.queryResult.rows || []} />
            </div>
          )}
        </div>
      )}

      {!msg.queryResult && msg.dryRun?.error && (
        <div className="px-5 pb-5">
          <p className="text-xs font-mono text-red-500/80 dark:text-red-400/80 break-all pl-6">{msg.dryRun.error}</p>
        </div>
      )}
    </>
  );
};