'use client';

import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
import { DebugName } from '@/components/game/debug/debug-context';
import { GameStateDebugSection } from './DebugTab/GameStateDebugSection';
import { DisciplineDebugSection } from './DebugTab/DisciplineDebugSection';
import { AttunementDebugSection } from './DebugTab/AttunementDebugSection';
import { ElementDebugSection } from './DebugTab/ElementDebugSection';
import { GolemDebugSection } from './DebugTab/GolemDebugSection';
import { PactDebugSection } from './DebugTab/PactDebugSection';
import { SpireDebugSection } from './DebugTab/SpireDebugSection';
import { AchievementDebugSection } from './DebugTab/AchievementDebugSection';

interface DebugSectionProps {
  title: string;
  color: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
}

function DebugSection({ title, color, children, defaultOpen = false }: DebugSectionProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <Card className="bg-gray-900/60 border-gray-700/50">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full px-4 py-3 flex items-center gap-2 text-left hover:bg-gray-800/30 transition-colors"
      >
        {isOpen ? (
          <ChevronDown className="w-4 h-4 text-gray-400" />
        ) : (
          <ChevronRight className="w-4 h-4 text-gray-400" />
        )}
        <span className="font-semibold text-sm" style={{ color }}>{title}</span>
      </button>
      {isOpen && (
        <CardContent className="pt-0 pb-4">
          {children}
        </CardContent>
      )}
    </Card>
  );
}

export function DebugTab() {
  return (
    <DebugName name="DebugTab">
      <div className="space-y-4">
        {/* Warning Banner */}
        <Card className="bg-amber-900/20 border-amber-600/50">
          <CardContent className="pt-4">
            <div className="flex items-center gap-2 text-amber-400">
              <AlertTriangle className="w-5 h-5" />
              <span className="font-semibold">Debug Mode</span>
            </div>
            <p className="text-sm text-amber-300/70 mt-1">
              These tools are for development and testing. Using them may break game balance or save data.
            </p>
          </CardContent>
        </Card>

        <div className="space-y-3">
          <DebugSection title="Game State" color="#60A5FA" defaultOpen={true}>
            <GameStateDebugSection />
          </DebugSection>

          <DebugSection title="Spire" color="#2DD4BF">
            <SpireDebugSection />
          </DebugSection>

          <DebugSection title="Disciplines" color="#818CF8">
            <DisciplineDebugSection />
          </DebugSection>

          <DebugSection title="Attunements" color="#C084FC">
            <AttunementDebugSection />
          </DebugSection>

          <DebugSection title="Elements" color="#4ADE80">
            <ElementDebugSection />
          </DebugSection>

          <DebugSection title="Golems" color="#FB923C">
            <GolemDebugSection />
          </DebugSection>

          <DebugSection title="Pacts" color="#F87171">
            <PactDebugSection />
          </DebugSection>

          <DebugSection title="Achievements" color="#FACC15">
            <AchievementDebugSection />
          </DebugSection>
        </div>
      </div>
    </DebugName>
  );
}

DebugTab.displayName = "DebugTab";