Mana-Loop/src/components/game/crafting/EnchantmentDesigner.tsx

'use client';

import { useState, useMemo } from 'react';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { GameCard } from '@/components/ui/game-card';
import { SectionHeader } from '@/components/ui/section-header';
import { StatRow } from '@/components/ui/stat-row';
import { ActionButton } from '@/components/ui/action-button';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { AlertCircle, Wand2, Scroll, Trash2, Plus, Minus, Check } from 'lucide-react';
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
import { fmt, type GameStore } from '@/lib/game/store';

export interface EnchantmentDesignerProps {
  store: GameStore;
  selectedEquipmentType: string | null;
  setSelectedEquipmentType: (type: string | null) => void;
  selectedEffects: DesignEffect[];
  setSelectedEffects: (effects: DesignEffect[]) => void;
  designName: string;
  setDesignName: (name: string) => void;
  selectedDesign: string | null;
  setSelectedDesign: (id: string | null) => void;
}

export function EnchantmentDesigner({
  store,
  selectedEquipmentType,
  setSelectedEquipmentType,
  selectedEffects,
  setSelectedEffects,
  designName,
  setDesignName,
  selectedDesign,
  setSelectedDesign,
}: EnchantmentDesignerProps) {
  const enchantmentDesigns = store.enchantmentDesigns;
  const designProgress = store.designProgress;
  const startDesigningEnchantment = store.startDesigningEnchantment;
  const cancelDesign = store.cancelDesign;
  const deleteDesign = store.deleteDesign;
  const unlockedEffects = store.unlockedEffects;
  const skills = store.skills;

  const enchantingLevel = skills.enchanting || 0;
  const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;

  // Calculate total capacity cost for current design
  const designCapacityCost = selectedEffects.reduce(
    (total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
    0
  );

  // Get capacity limit for selected equipment type
  const selectedEquipmentCapacity = selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
  const isOverCapacity = selectedEquipmentType ? designCapacityCost > selectedEquipmentCapacity : false;

  // Calculate design time
  const designTime = selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);

  // Add effect to design
  const addEffect = (effectId: string) => {
    const existing = selectedEffects.find(e => e.effectId === effectId);
    const effectDef = ENCHANTMENT_EFFECTS[effectId];
    if (!effectDef) return;

    if (existing) {
      if (existing.stacks < effectDef.maxStacks) {
        setSelectedEffects(selectedEffects.map(e =>
          e.effectId === effectId
            ? { ...e, stacks: e.stacks + 1 }
            : e
        ));
      }
    } else {
      setSelectedEffects([...selectedEffects, {
        effectId,
        stacks: 1,
        capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
      }]);
    }
  };

  // Remove effect from design
  const removeEffect = (effectId: string) => {
    const existing = selectedEffects.find(e => e.effectId === effectId);
    if (!existing) return;

    if (existing.stacks > 1) {
      setSelectedEffects(selectedEffects.map(e =>
        e.effectId === effectId
          ? { ...e, stacks: e.stacks - 1 }
          : e
      ));
    } else {
      setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
    }
  };

  // Create design
  const handleCreateDesign = () => {
    if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;

    const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
    if (success) {
      // Reset form
      setDesignName('');
      setSelectedEquipmentType(null);
      setSelectedEffects([]);
    }
  };

  // Get available effects for selected equipment type (only unlocked ones)
  const getAvailableEffects = () => {
    if (!selectedEquipmentType) return [];
    const type = EQUIPMENT_TYPES[selectedEquipmentType];
    if (!type) return [];

    return Object.values(ENCHANTMENT_EFFECTS).filter(
      effect =>
        effect.allowedEquipmentCategories.includes(type.category) &&
        unlockedEffects.includes(effect.id)
    );
  };

  // Get incompatible effects (unlocked but not for this equipment type)
  // Requirement (task3 bug #7): Show incompatible enchantments in greyed-out "Unavailable" section
  const getIncompatibleEffects = () => {
    if (!selectedEquipmentType) return [];
    const type = EQUIPMENT_TYPES[selectedEquipmentType];
    if (!type) return [];

    return Object.values(ENCHANTMENT_EFFECTS).filter(
      effect =>
        !effect.allowedEquipmentCategories.includes(type.category) &&
        unlockedEffects.includes(effect.id)
    );
  };

  // Get equipment types that the player actually owns (has instances of)
  // This ensures enchantment compatibility is based on owned items, not just blueprints
  const getOwnedEquipmentTypes = () => {
    // Get all unique equipment type IDs from owned instances
    const ownedEquipmentTypeIds = new Set<string>();

    // Check all equipment instances the player owns
    for (const instance of Object.values(store.equipmentInstances)) {
      ownedEquipmentTypeIds.add(instance.typeId);
    }

    // Filter EQUIPMENT_TYPES to only include types the player owns
    return Object.values(EQUIPMENT_TYPES).filter(type => ownedEquipmentTypeIds.has(type.id));
  };

  const ownedEquipmentTypes = getOwnedEquipmentTypes();
  const availableEffects = getAvailableEffects();
  const incompatibleEffects = getIncompatibleEffects();

  // Get the reason why an effect is incompatible
  const getIncompatibilityReason = (effect: typeof ENCHANTMENT_EFFECTS[string]): string => {
    if (!selectedEquipmentType) return 'No equipment selected';
    const type = EQUIPMENT_TYPES[selectedEquipmentType];
    if (!type) return 'Unknown equipment type';

    // Check what categories this effect is allowed for
    const allowedCategories = effect.allowedEquipmentCategories;
    const equipmentCategory = type.category;

    if (allowedCategories.includes(equipmentCategory)) {
      return 'Compatible';
    }

    // Provide specific reasons
    if (allowedCategories.includes('weapon' as EquipmentCategory) && equipmentCategory !== 'sword' && equipmentCategory !== 'caster' && equipmentCategory !== 'catalyst') {
      return `Requires a weapon (${allowedCategories.filter(c => ['sword', 'caster', 'catalyst'].includes(c)).join(', ')})`;
    }

    return `Requires ${allowedCategories.join(' or ')} equipment`;
  };

  // Render stage
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment Type Selection */}
      <GameCard variant="default">
        <SectionHeader title="1. Select Equipment Type" />
        {designProgress ? (
          <div className="space-y-3">
            <div className="text-sm text-[var(--text-secondary)]">
              Designing for: {EQUIPMENT_TYPES[designProgress.equipmentType]?.name}
            </div>
            <div className="text-sm font-semibold text-[var(--mana-light)]">{designProgress.name}</div>
            <Progress
              value={(designProgress.progress / designProgress.required) * 100}
              className="h-3 bg-[var(--bg-sunken)]"
            />
            <div className="flex justify-between text-xs text-[var(--text-muted)]">
              <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
              <ActionButton size="sm" variant="outline" onClick={cancelDesign}>Cancel</ActionButton>
            </div>
          </div>
        ) : (
          <ScrollArea className="h-64">
            <div className="grid grid-cols-2 gap-2">
              {ownedEquipmentTypes.map(type => (
                <div
                  key={type.id}
                  className={`p-2 rounded border cursor-pointer transition-all
                    ${selectedEquipmentType === type.id
                      ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                      : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
                    }`}
                  onClick={() => setSelectedEquipmentType(type.id)}
                  role="button"
                  tabIndex={0}
                  aria-label={`Select ${type.name}`}
                >
                  <div className="text-sm font-semibold text-[var(--text-primary)]">{type.name}</div>
                  <div className="text-xs text-[var(--text-muted)]">Cap: {type.baseCapacity}</div>
                </div>
              ))}
            </div>
            {ownedEquipmentTypes.length === 0 && (
              <div className="text-center text-[var(--text-muted)] py-4 text-sm">
                No equipment blueprints owned. Craft or find equipment blueprints first.
              </div>
            )}
          </ScrollArea>
        )}
      </GameCard>

      {/* Effect Selection */}
      <GameCard variant="default">
        <SectionHeader title="2. Select Effects" />
        {enchantingLevel < 1 ? (
          <div className="text-center text-[var(--text-muted)] py-8">
            <Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50 text-[var(--text-disabled)]" />
            <p>Learn Enchanting skill to design enchantments</p>
          </div>
        ) : designProgress ? (
          <div className="space-y-2">
            <div className="text-sm text-[var(--text-secondary)]">Design in progress...</div>
            {designProgress.effects.map(eff => {
              const def = ENCHANTMENT_EFFECTS[eff.effectId];
              return (
                <div key={eff.effectId} className="flex justify-between text-sm text-[var(--text-primary)]">
                  <span>{def?.name} x{eff.stacks}</span>
                  <span className="text-[var(--text-muted)]">{eff.capacityCost} cap</span>
                </div>
              );
            })}
          </div>
        ) : !selectedEquipmentType ? (
          <div className="text-center text-[var(--text-muted)] py-8">
            Select an equipment type first
          </div>
        ) : (
          <>
            <ScrollArea className="h-48 mb-4">
              <div className="space-y-2">
                {/* Compatible Effects */}
                {availableEffects.map(effect => {
                  const selected = selectedEffects.find(e => e.effectId === effect.id);
                  const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);

                  return (
                    <div
                      key={effect.id}
                      className={`p-2 rounded border transition-all
                        ${selected
                          ? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
                          : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50'
                        }`}
                    >
                      <div className="flex justify-between items-start">
                        <div className="flex-1">
                          <div className="text-sm font-semibold text-[var(--text-primary)]">{effect.name}</div>
                          <div className="text-xs text-[var(--text-muted)]">{effect.description}</div>
                          <div className="text-xs text-[var(--text-disabled)] mt-1">
                            Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
                          </div>
                        </div>
                        <div className="flex gap-1">
                          {selected && (
                            <ActionButton
                              size="sm"
                              variant="outline"
                              className="h-6 w-6 p-0"
                              onClick={() => removeEffect(effect.id)}
                            >
                              <Minus className="w-3 h-3" />
                            </ActionButton>
                          )}
                          <ActionButton
                            size="sm"
                            variant="outline"
                            className="h-6 w-6 p-0"
                            onClick={() => addEffect(effect.id)}
                            disabled={!selected && selectedEffects.length >= 5}
                          >
                            <Plus className="w-3 h-3" />
                          </ActionButton>
                        </div>
                      </div>
                      {selected && (
                        <Badge variant="outline" className="mt-1 text-xs border-[var(--mana-stellar)] text-[var(--mana-stellar)]">
                          {selected.stacks}/{effect.maxStacks}
                        </Badge>
                      )}
                    </div>
                  );
                })}

                {/* Incompatible Effects - Requirement: greyed-out "Unavailable" section with tooltips */}
                {incompatibleEffects.length > 0 && (
                  <>
                    <Separator className="bg-[var(--border-subtle)] my-2" />
                    <div className="text-xs font-semibold text-[var(--text-disabled)] uppercase tracking-wider mb-2">
                      Unavailable
                    </div>
                    {incompatibleEffects.map(effect => {
                      const reason = getIncompatibilityReason(effect);

                      return (
                        <TooltipProvider key={effect.id}>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <div
                                className="p-2 rounded border border-[var(--border-subtle)] bg-[var(--bg-sunken)]/30 opacity-50 cursor-not-allowed"
                              >
                                <div className="flex justify-between items-start">
                                  <div className="flex-1">
                                    <div className="text-sm font-semibold text-[var(--text-disabled)]">{effect.name}</div>
                                    <div className="text-xs text-[var(--text-disabled)]">{effect.description}</div>
                                  </div>
                                  <AlertCircle size={14} className="text-[var(--text-disabled)]" />
                                </div>
                              </div>
                            </TooltipTrigger>
                            <TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
                              <p className="font-semibold">Incompatible Effect</p>
                              <p className="text-xs text-[var(--text-muted)] mt-1">{reason}</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      );
                    })}
                  </>
                )}
              </div>
            </ScrollArea>

            {/* Selected effects summary */}
            <Separator className="bg-[var(--border-subtle)] my-2" />
            <div className="space-y-2">
              <input
                type="text"
                placeholder="Design name..."
                value={designName}
                onChange={(e) => setDesignName(e.target.value)}
                className="w-full bg-[var(--bg-sunken)] border border-[var(--border-default)] rounded px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--border-focus)]"
                aria-label="Design name"
              />
              <StatRow
                label="Total Capacity:"
                value={
                  <span className={isOverCapacity ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
                    {designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
                  </span>
                }
              />
              <StatRow
                label="Design Time:"
                value={`${designTime.toFixed(1)}h`}
                highlight="default"
              />
              <ActionButton
                className="w-full"
                disabled={!designName || selectedEffects.length === 0 || isOverCapacity}
                onClick={handleCreateDesign}
              >
                {isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
              </ActionButton>
            </div>
          </>
        )}
      </GameCard>

      {/* Saved Designs */}
      <GameCard variant="default" className="lg:col-span-2">
        <SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
        {enchantmentDesigns.length === 0 ? (
          <div className="text-center text-[var(--text-muted)] py-4">
            No saved designs yet
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
            {enchantmentDesigns.map(design => (
              <div
                key={design.id}
                className={`p-3 rounded border cursor-pointer transition-all
                  ${selectedDesign === design.id
                    ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                    : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
                  }`}
                onClick={() => setSelectedDesign(design.id)}
                role="button"
                tabIndex={0}
                aria-label={`Select design: ${design.name}`}
              >
                <div className="flex justify-between items-start">
                  <div>
                    <div className="font-semibold text-[var(--text-primary)]">{design.name}</div>
                    <div className="text-xs text-[var(--text-muted)]">
                      {EQUIPMENT_TYPES[design.equipmentType]?.name}
                    </div>
                  </div>
                  <ActionButton
                    size="sm"
                    variant="ghost"
                    className="h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--color-danger)]"
                    onClick={(e) => {
                      e.stopPropagation();
                      deleteDesign(design.id);
                    }}
                    aria-label={`Delete design: ${design.name}`}
                  >
                    <Trash2 className="w-4 h-4" />
                  </ActionButton>
                </div>
                <div className="mt-2 text-xs text-[var(--text-muted)]">
                  {design.effects.length} effects | {design.totalCapacityUsed} cap
                </div>
              </div>
            ))}
          </div>
        )}
      </GameCard>
    </div>
  );
}

EnchantmentDesigner.displayName = 'EnchantmentDesigner';