'use client';

import { useState } from 'react';
import { useGameStore } from '@/lib/game/store';
import { ELEMENTS, MANA_PER_ELEMENT } from '@/lib/game/constants';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export function LabTab() {
  const store = useGameStore();
  const [convertTarget, setConvertTarget] = useState('fire');
  
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Elemental Mana Display */}
      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 game-panel-title text-xs">Elemental Mana</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
            {Object.entries(store.elements)
              .filter(([, state]) => state.unlocked && state.current >= 1)
              .map(([id, state]) => {
                const def = ELEMENTS[id];
                const isSelected = convertTarget === id;
                return (
                  <div
                    key={id}
                    className={`p-2 rounded border cursor-pointer transition-all ${isSelected ? 'border-blue-500 bg-blue-900/20' : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'}`}
                    style={{ borderColor: isSelected ? def?.color : undefined }}
                    onClick={() => setConvertTarget(id)}
                  >
                    <div className="text-lg text-center">{def?.sym}</div>
                    <div className="text-xs font-semibold text-center" style={{ color: def?.color }}>{def?.name}</div>
                    <div className="text-xs text-gray-400 game-mono text-center">{state.current}/{state.max}</div>
                  </div>
                );
              })}
          </div>
        </CardContent>
      </Card>

      {/* Element Conversion */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 game-panel-title text-xs">Element Conversion</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-gray-400 mb-3">
            Convert raw mana to elemental mana (100:1 ratio)
          </p>
          
          <div className="flex gap-2 flex-wrap">
            <Button
              size="sm"
              variant="outline"
              onClick={() => store.convertMana(convertTarget, 1)}
              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT}
            >
              +1 ({MANA_PER_ELEMENT})
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => store.convertMana(convertTarget, 10)}
              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT * 10}
            >
              +10 ({MANA_PER_ELEMENT * 10})
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => store.convertMana(convertTarget, 100)}
              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT * 100}
            >
              +100 ({MANA_PER_ELEMENT * 100})
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Unlock Elements */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 game-panel-title text-xs">Unlock Elements</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-gray-400 mb-3">
            Unlock new elemental affinities (500 mana each)
          </p>
          
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
            {Object.entries(store.elements)
              .filter(([id, state]) => !state.unlocked && ELEMENTS[id]?.cat !== 'exotic')
              .map(([id]) => {
                const def = ELEMENTS[id];
                return (
                  <div
                    key={id}
                    className="p-2 rounded border border-gray-700 bg-gray-800/50"
                  >
                    <div className="text-lg opacity-50">{def?.sym}</div>
                    <div className="text-xs font-semibold text-gray-500">{def?.name}</div>
                    <Button
                      size="sm"
                      variant="outline"
                      className="mt-1 w-full"
                      disabled={store.rawMana < 500}
                      onClick={() => store.unlockElement(id)}
                    >
                      Unlock
                    </Button>
                  </div>
                );
              })}
          </div>
        </CardContent>
      </Card>

      {/* Composite Crafting */}
      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 game-panel-title text-xs">Composite & Exotic Crafting</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
            {Object.entries(ELEMENTS)
              .filter(([, def]) => def.recipe)
              .map(([id, def]) => {
                const state = store.elements[id];
                const recipe = def.recipe!;
                const canCraft = recipe.every(
                  (r) => (store.elements[r]?.current || 0) >= recipe.filter((x) => x === r).length
                );
                
                return (
                  <div
                    key={id}
                    className={`p-3 rounded border ${canCraft ? 'border-gray-600 bg-gray-800/50' : 'border-gray-700 bg-gray-800/30 opacity-50'}`}
                  >
                    <div className="flex items-center gap-2 mb-2">
                      <span className="text-2xl">{def.sym}</span>
                      <div>
                        <div className="text-sm font-semibold" style={{ color: def.color }}>
                          {def.name}
                        </div>
                        <div className="text-xs text-gray-500">{def.cat}</div>
                      </div>
                    </div>
                    <div className="text-xs text-gray-400 mb-2">
                      {recipe.map((r) => ELEMENTS[r]?.sym).join(' + ')}
                    </div>
                    <Button
                      size="sm"
                      variant={canCraft ? 'default' : 'outline'}
                      className="w-full"
                      disabled={!canCraft}
                      onClick={() => store.craftComposite(id)}
                    >
                      Craft
                    </Button>
                  </div>
                );
              })}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}