import { useState } from 'react';

export interface Outfit {
  id: string;
  name: string;
  icon: string;
  color: string;
}

const OUTFITS: Outfit[] = [
  { id: 'cozy-hoodie', name: 'Cozy Hoodie', icon: '🧸', color: '#FFB6C1' },
  { id: 'girly-dress', name: 'Girly Dress', icon: '👗', color: '#D8B4FE' },
  { id: 'pajama-set', name: 'Pajama Set', icon: '🌙', color: '#A7F3D0' },
  { id: 'study-sweater', name: 'Study Sweater', icon: '📚', color: '#FED7AA' },
  { id: 'going-out', name: 'Going Out', icon: '✨', color: '#FBCFE8' },
];

const ACCESSORIES: Outfit[] = [
  { id: 'bow', name: 'Bow', icon: '🎀', color: '#FFB6C1' },
  { id: 'glasses', name: 'Glasses', icon: '👓', color: '#D8B4FE' },
  { id: 'flower-crown', name: 'Flower Crown', icon: '🌼', color: '#A7F3D0' },
  { id: 'star-earrings', name: 'Star Earrings', icon: '⭐', color: '#FDE68A' },
  { id: 'scarf', name: 'Scarf', icon: '🧣', color: '#FBCFE8' },
];

interface Props {
  onOutfitChange: (id: string) => void;
  onAccessoryChange: (id: string | null) => void;
}

export default function Wardrobe({ onOutfitChange, onAccessoryChange }: Props) {
  const [currentOutfit, setCurrentOutfit] = useState('cozy-hoodie');
  const [currentAcc, setCurrentAcc] = useState<string | null>(null);
  const [showAcc, setShowAcc] = useState(false);

  const selectOutfit = (id: string) => {
    setCurrentOutfit(id);
    onOutfitChange(id);
  };

  const selectAcc = (id: string) => {
    const next = currentAcc === id ? null : id;
    setCurrentAcc(next);
    onAccessoryChange(next);
  };

  return (
    <div className="p-4">
      <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
        <span>👘</span> Wardrobe
      </h3>

      {/* Outfits */}
      <div className="flex flex-wrap gap-2 mb-3">
        {OUTFITS.map((o) => (
          <button
            key={o.id}
            onClick={() => selectOutfit(o.id)}
            className={`flex items-center gap-1 px-3 py-1.5 rounded-xl text-xs font-medium transition-all ${
              currentOutfit === o.id
                ? 'text-white shadow-md'
                : 'bg-white/40 text-kira-plum/60 hover:bg-kira-glow'
            }`}
            style={currentOutfit === o.id ? { background: o.color } : {}}
          >
            <span>{o.icon}</span>
            <span>{o.name}</span>
          </button>
        ))}
      </div>

      {/* Accessories toggle */}
      <button
        onClick={() => setShowAcc(!showAcc)}
        className="text-xs text-kira-violet/50 hover:text-kira-violet flex items-center gap-1 mb-2"
      >
        <span>{showAcc ? '▾' : '▸'}</span> Accessories
      </button>

      {showAcc && (
        <div className="flex flex-wrap gap-2">
          {ACCESSORIES.map((a) => (
            <button
              key={a.id}
              onClick={() => selectAcc(a.id)}
              className={`flex items-center gap-1 px-3 py-1 rounded-xl text-xs font-medium transition-all ${
                currentAcc === a.id
                  ? 'text-white shadow-md'
                  : 'bg-white/40 text-kira-plum/60 hover:bg-kira-glow'
              }`}
              style={currentAcc === a.id ? { background: a.color } : {}}
            >
              <span>{a.icon}</span>
              <span>{a.name}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
