'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';

export function ElementDebug() {
  const elements = useManaStore((s) => s.elements);
  const unlockElement = useManaStore((s) => s.unlockElement);
  const addElementMana = useManaStore((s) => s.addElementMana);

  const handleUnlockElement = (element: string) => {
    unlockElement(element, 500);
  };

  const handleAddElementalMana = (element: string, amount: number) => {
    if (addElementMana) {
      addElementMana(element, amount);
    }
  };

  return (
    <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, 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)}
                  >
                    <Lock className="w-3 h-3 mr-1" /> Unlock
                  </Button>
                )}
                {elem.unlocked && (
                  <Button
                    size="sm"
                    variant="outline"
                    className="mt-2"
                    onClick={() => handleAddElementalMana(id, 10)}
                  >
                    +10
                  </Button>
                )}
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}

ElementDebug.displayName = "ElementDebug";