'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { 
  RotateCcw, Bug, Plus, Minus, Lock, Unlock, Zap, 
  Clock, Star, AlertTriangle, Sparkles, Settings
} from 'lucide-react';
import type { GameStore } from '@/lib/game/types';
import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
import { ELEMENTS } from '@/lib/game/constants';
import { fmt } from '@/lib/game/store';

interface DebugTabProps {
  store: GameStore;
}

export function DebugTab({ store }: DebugTabProps) {
  const [confirmReset, setConfirmReset] = useState(false);
  
  const handleReset = () => {
    if (confirmReset) {
      store.resetGame();
      setConfirmReset(false);
    } else {
      setConfirmReset(true);
      setTimeout(() => setConfirmReset(false), 3000);
    }
  };
  
  const handleAddMana = (amount: number) => {
    // Use gatherMana multiple times to add mana
    for (let i = 0; i < amount; i++) {
      store.gatherMana();
    }
  };
  
  const handleUnlockAttunement = (id: string) => {
    // Debug action to unlock attunements
    if (store.debugUnlockAttunement) {
      store.debugUnlockAttunement(id);
    }
  };
  
  const handleUnlockElement = (element: string) => {
    store.unlockElement(element);
  };
  
  const handleAddElementalMana = (element: string, amount: number) => {
    const elem = store.elements[element];
    if (elem?.unlocked) {
      // Add directly to element pool - need to implement in store
      if (store.debugAddElementalMana) {
        store.debugAddElementalMana(element, amount);
      }
    }
  };
  
  const handleSetTime = (day: number, hour: number) => {
    if (store.debugSetTime) {
      store.debugSetTime(day, hour);
    }
  };
  
  const handleAddAttunementXP = (id: string, amount: number) => {
    if (store.debugAddAttunementXP) {
      store.debugAddAttunementXP(id, amount);
    }
  };

  return (
    <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="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Game Reset */}
        <Card className="bg-gray-900/80 border-gray-700">
          <CardHeader className="pb-2">
            <CardTitle className="text-red-400 text-sm flex items-center gap-2">
              <RotateCcw className="w-4 h-4" />
              Game Reset
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-xs text-gray-400">
              Reset all game progress and start fresh. This cannot be undone.
            </p>
            <Button
              className={`w-full ${confirmReset ? 'bg-red-600 hover:bg-red-700' : 'bg-gray-700 hover:bg-gray-600'}`}
              onClick={handleReset}
            >
              {confirmReset ? (
                <>
                  <AlertTriangle className="w-4 h-4 mr-2" />
                  Click Again to Confirm Reset
                </>
              ) : (
                <>
                  <RotateCcw className="w-4 h-4 mr-2" />
                  Reset Game
                </>
              )}
            </Button>
          </CardContent>
        </Card>

        {/* Mana Debug */}
        <Card className="bg-gray-900/80 border-gray-700">
          <CardHeader className="pb-2">
            <CardTitle className="text-blue-400 text-sm flex items-center gap-2">
              <Zap className="w-4 h-4" />
              Mana Debug
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="text-xs text-gray-400 mb-2">
              Current: {fmt(store.rawMana)} / {fmt(store.getMaxMana())}
            </div>
            <div className="flex gap-2 flex-wrap">
              <Button size="sm" variant="outline" onClick={() => handleAddMana(10)}>
                <Plus className="w-3 h-3 mr-1" /> +10
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleAddMana(100)}>
                <Plus className="w-3 h-3 mr-1" /> +100
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleAddMana(1000)}>
                <Plus className="w-3 h-3 mr-1" /> +1K
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleAddMana(10000)}>
                <Plus className="w-3 h-3 mr-1" /> +10K
              </Button>
            </div>
            <Separator className="bg-gray-700" />
            <div className="text-xs text-gray-400">Fill to max:</div>
            <Button 
              size="sm" 
              className="w-full bg-blue-600 hover:bg-blue-700"
              onClick={() => {
                const max = store.getMaxMana();
                const current = store.rawMana;
                for (let i = 0; i < Math.floor(max - current); i++) {
                  store.gatherMana();
                }
              }}
            >
              Fill Mana
            </Button>
          </CardContent>
        </Card>

        {/* Time Control */}
        <Card className="bg-gray-900/80 border-gray-700">
          <CardHeader className="pb-2">
            <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
              <Clock className="w-4 h-4" />
              Time Control
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="text-xs text-gray-400">
              Current: Day {store.day}, Hour {store.hour}
            </div>
            <div className="flex gap-2 flex-wrap">
              <Button size="sm" variant="outline" onClick={() => handleSetTime(1, 0)}>
                Day 1
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleSetTime(10, 0)}>
                Day 10
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleSetTime(20, 0)}>
                Day 20
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleSetTime(30, 0)}>
                Day 30
              </Button>
            </div>
            <Separator className="bg-gray-700" />
            <div className="flex gap-2">
              <Button 
                size="sm" 
                variant="outline"
                onClick={() => store.togglePause()}
              >
                {store.paused ? '▶ Resume' : '⏸ Pause'}
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Attunement Unlock */}
        <Card className="bg-gray-900/80 border-gray-700">
          <CardHeader className="pb-2">
            <CardTitle className="text-purple-400 text-sm flex items-center gap-2">
              <Sparkles className="w-4 h-4" />
              Attunements
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {Object.entries(ATTUNEMENTS_DEF).map(([id, def]) => {
              const isActive = store.attunements?.[id]?.active;
              const level = store.attunements?.[id]?.level || 1;
              const xp = store.attunements?.[id]?.experience || 0;
              
              return (
                <div key={id} className="flex items-center justify-between p-2 bg-gray-800/50 rounded">
                  <div className="flex items-center gap-2">
                    <span>{def.icon}</span>
                    <div>
                      <div className="text-sm font-medium">{def.name}</div>
                      {isActive && (
                        <div className="text-xs text-gray-400">Lv.{level} • {xp} XP</div>
                      )}
                    </div>
                  </div>
                  <div className="flex gap-1">
                    {!isActive && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleUnlockAttunement(id)}
                      >
                        <Unlock className="w-3 h-3" />
                      </Button>
                    )}
                    {isActive && (
                      <>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleAddAttunementXP(id, 50)}
                        >
                          +50 XP
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => handleAddAttunementXP(id, 500)}
                        >
                          +500 XP
                        </Button>
                      </>
                    )}
                  </div>
                </div>
              );
            })}
          </CardContent>
        </Card>

        {/* Element Unlock */}
        <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
          <CardHeader className="pb-2">
            <CardTitle className="text-green-400 text-sm flex items-center gap-2">
              <Star className="w-4 h-4" />
              Elemental Mana
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
              {Object.entries(ELEMENTS).map(([id, def]) => {
                const elem = store.elements[id];
                const isUnlocked = elem?.unlocked;
                
                return (
                  <div
                    key={id}
                    className={`p-2 rounded border ${
                      isUnlocked ? 'border-gray-600' : 'border-gray-800 opacity-60'
                    }`}
                    style={{ 
                      borderColor: isUnlocked ? def.color : undefined 
                    }}
                  >
                    <div className="flex items-center justify-between mb-1">
                      <span style={{ color: def.color }}>{def.sym}</span>
                      {!isUnlocked && (
                        <Button
                          size="sm"
                          variant="ghost"
                          className="h-5 w-5 p-0"
                          onClick={() => handleUnlockElement(id)}
                        >
                          <Lock className="w-3 h-3" />
                        </Button>
                      )}
                    </div>
                    <div className="text-xs" style={{ color: def.color }}>{def.name}</div>
                    {isUnlocked && (
                      <div className="text-xs text-gray-400 mt-1">
                        {elem.current.toFixed(0)}/{elem.max}
                      </div>
                    )}
                    {isUnlocked && (
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-5 w-full mt-1 text-xs"
                        onClick={() => handleAddElementalMana(id, 100)}
                      >
                        +100
                      </Button>
                    )}
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>

        {/* Skills Debug */}
        <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
          <CardHeader className="pb-2">
            <CardTitle className="text-cyan-400 text-sm flex items-center gap-2">
              <Settings className="w-4 h-4" />
              Quick Actions
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex gap-2 flex-wrap">
              <Button
                size="sm"
                variant="outline"
                onClick={() => {
                  // Unlock all base elements
                  ['fire', 'water', 'air', 'earth', 'light', 'dark', 'life', 'death'].forEach(e => {
                    if (!store.elements[e]?.unlocked) {
                      store.unlockElement(e);
                    }
                  });
                }}
              >
                Unlock All Base Elements
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => {
                  // Unlock utility elements
                  ['mental', 'transference', 'force'].forEach(e => {
                    if (!store.elements[e]?.unlocked) {
                      store.unlockElement(e);
                    }
                  });
                }}
              >
                Unlock Utility Elements
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => {
                  // Max floor
                  if (store.debugSetFloor) {
                    store.debugSetFloor(100);
                  }
                }}
              >
                Skip to Floor 100
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}