'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Star, Lock } from 'lucide-react';
import { useManaStore } from '@/lib/game/stores';
import { ELEMENTS } from '@/lib/game/constants';
import { DebugName } from '@/components/game/debug/debug-context';

export function ElementDebugSection() {
  const elements = useManaStore((s) => s.elements);

  const handleUnlockElement = (element: string) => {
    useManaStore.getState().unlockElement(element, 0);
  };

  const handleAddElementalMana = (element: string, amount: number) => {
    const elem = elements?.[element];
    if (elem?.unlocked) {
      useManaStore.getState().addElementMana(element, amount, elem.max);
    }
  };

  const handleUnlockAll = () => {
    Object.keys(elements || {}).forEach((id) => {
      if (!elements[id]?.unlocked) {
        handleUnlockElement(id);
      }
    });
  };

  return (
    <DebugName name="ElementDebugSection">
      <Card className="bg-gray-900/80 border-gray-700">
        <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="mb-3">
            <Button size="sm" variant="outline" onClick={handleUnlockAll} data-testid="debug-elements-unlock-all">
              <Lock className="w-3 h-3 mr-1" /> Unlock All Elements
            </Button>
          </div>
          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
            {Object.entries(elements || {}).map(([id, elem]) => {
              const def = ELEMENTS[id];
              return (
                <div
                  key={id}
                  className={`p-2 rounded border text-center ${
                    elem.unlocked ? 'border-gray-600 bg-gray-800/50' : 'border-gray-800 opacity-60'
                  }`}
                  style={{
                    borderColor: elem.unlocked ? def?.color : undefined
                  }}
                >
                  <div className="text-lg">{def?.sym}</div>
                  <div className="text-xs text-gray-400">{def?.name}</div>
                  <div className="text-xs text-gray-300 mt-1">
                    {elem.current}/{elem.max}
                  </div>
                  {!elem.unlocked && (
                    <Button
                      size="sm"
                      variant="outline"
                      className="mt-2"
                      onClick={() => handleUnlockElement(id)}
                      data-testid={`debug-element-unlock-${id}`}
                    >
                      <Lock className="w-3 h-3 mr-1" /> Unlock
                    </Button>
                  )}
                  {elem.unlocked && (
                    <Button
                      size="sm"
                      variant="outline"
                      className="mt-2"
                      onClick={() => handleAddElementalMana(id, 10)}
                      data-testid={`debug-element-add10-${id}`}
                    >
                      +10
                    </Button>
                  )}
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>
    </DebugName>
  );
}

ElementDebugSection.displayName = "ElementDebugSection";
