'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BookOpen, Plus, Pause, Play } from 'lucide-react';
import { useDisciplineStore } from '@/lib/game/stores/discipline-slice';
import { ALL_DISCIPLINES } from '@/lib/game/data/disciplines';
import { useManaStore } from '@/lib/game/stores/manaStore';
import { DebugName } from '@/components/game/debug/debug-context';

export function DisciplineDebugSection() {
  const disciplines = useDisciplineStore((s) => s.disciplines);
  const activeIds = useDisciplineStore((s) => s.activeIds);
  const concurrentLimit = useDisciplineStore((s) => s.concurrentLimit);
  const activate = useDisciplineStore((s) => s.activate);
  const deactivate = useDisciplineStore((s) => s.deactivate);
  const elements = useManaStore((s) => s.elements);

  const _handleTogglePause = (id: string) => {
    const disc = disciplines[id];
    if (!disc) return;
    if (disc.paused) {
      activate(id);
    } else {
      deactivate(id);
      // Re-activate with paused false — just activate again
      activate(id);
    }
  };

  const handleAddXP = (id: string, amount: number) => {
    useDisciplineStore.setState((s) => {
      const disc = s.disciplines[id];
      if (!disc) return s;
      return {
        disciplines: {
          ...s.disciplines,
          [id]: { ...disc, xp: disc.xp + amount },
        },
      };
    });
  };

  const handleActivateAll = () => {
    ALL_DISCIPLINES.forEach((d) => {
      if (!activeIds.includes(d.id)) {
        activate(d.id, { elements });
      }
    });
  };

  const handleDeactivateAll = () => {
    activeIds.forEach((id) => {
      deactivate(id);
    });
  };

  return (
    <DebugName name="DisciplineDebugSection">
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-indigo-400 text-sm flex items-center gap-2">
            <BookOpen className="w-4 h-4" />
            Disciplines
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex gap-2 flex-wrap mb-2">
            <Button size="sm" variant="outline" onClick={handleActivateAll}>
              <Play className="w-3 h-3 mr-1" /> Activate All
            </Button>
            <Button size="sm" variant="outline" onClick={handleDeactivateAll}>
              <Pause className="w-3 h-3 mr-1" /> Deactivate All
            </Button>
          </div>
          <div className="text-xs text-gray-400">
            Active: {activeIds.length} / {concurrentLimit}
          </div>
          <div className="space-y-2 max-h-64 overflow-y-auto">
            {ALL_DISCIPLINES.map((def) => {
              const disc = disciplines[def.id];
              const isActive = activeIds.includes(def.id);
              const xp = disc?.xp || 0;

              return (
                <div
                  key={def.id}
                  className="flex items-center justify-between p-2 bg-gray-800/50 rounded"
                >
                  <div>
                    <div className="text-sm font-medium">{def.name}</div>
                    <div className="text-xs text-gray-400">
                      {isActive ? `XP: ${xp}` : 'Inactive'}
                    </div>
                  </div>
                  <div className="flex gap-1">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleAddXP(def.id, 100)}
                    >
                      <Plus className="w-3 h-3 mr-1" /> +100
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleAddXP(def.id, 1000)}
                    >
                      +1K
                    </Button>
                    <Button
                      size="sm"
                      variant={isActive ? 'default' : 'outline'}
                      onClick={() => {
                        if (isActive) {
                          deactivate(def.id);
                        } else {
                          activate(def.id, { elements });
                        }
                      }}
                    >
                      {isActive ? (
                        <Pause className="w-3 h-3" />
                      ) : (
                        <Play className="w-3 h-3" />
                      )}
                    </Button>
                  </div>
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>
    </DebugName>
  );
}

DisciplineDebugSection.displayName = "DisciplineDebugSection";