import React from 'react';

const ICON_MAP = {
  social: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
    </svg>
  ),
  streaming: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18" />
      <line x1="7" y1="2" x2="7" y2="22" />
      <line x1="17" y1="2" x2="17" y2="22" />
      <line x1="2" y1="12" x2="22" y2="12" />
      <line x1="2" y1="7" x2="7" y2="7" />
      <line x1="2" y1="17" x2="7" y2="17" />
      <line x1="17" y1="17" x2="22" y2="17" />
      <line x1="17" y1="7" x2="22" y2="7" />
    </svg>
  ),
  adult: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      <path d="M12 8v4" />
      <path d="M12 16h.01" />
    </svg>
  ),
  gaming: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="6" y1="12" x2="10" y2="12" />
      <line x1="8" y1="10" x2="8" y2="14" />
      <line x1="15" y1="13" x2="15.01" y2="13" />
      <line x1="18" y1="11" x2="18.01" y2="11" />
      <rect x="2" y="6" width="20" height="12" rx="2" />
    </svg>
  ),
  custom: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="1" />
      <circle cx="19" cy="12" r="1" />
      <circle cx="5" cy="12" r="1" />
    </svg>
  ),
};

export default function CategoryCard({ name, config, timers, onToggle, onBonusTime, onAssignRules }) {
  const { allowed, rules } = config;
  const activeTimer = timers?.[0];

  const formatRemaining = (ms) => {
    const mins = Math.ceil(ms / 60000);
    if (mins >= 60) return `${Math.floor(mins / 60)}h ${mins % 60}m`;
    return `${mins}m`;
  };

  return (
    <div className="glass-card p-4 flex items-center justify-between group overflow-hidden relative">
      <div className={`absolute left-0 top-0 bottom-0 w-1 transition-colors duration-500 ${allowed ? 'bg-manor-green' : 'bg-blockRed'}`} />

      <div className="flex items-center gap-4 min-w-0 z-10">
        <div className={`w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 ${
          allowed 
            ? 'bg-manor-green/10 text-manor-green border border-manor-green/20' 
            : 'bg-blockRed/10 text-blockRed border border-blockRed/20'
        }`}>
          {ICON_MAP[config.icon] || ICON_MAP.custom}
        </div>

        <div className="min-w-0">
          <h3 className="text-cream text-lg font-serif font-semibold tracking-wide group-hover:text-white transition-colors">{name}</h3>
          <div className="flex items-center gap-3 mt-1">
            <span className="text-cream-dark text-[0.65rem] uppercase tracking-[0.15em] font-mono opacity-60">
              {rules.length} {rules.length === 1 ? 'Rule' : 'Rules'}
            </span>
            {activeTimer && (
              <div className="flex items-center gap-1.5">
                <div className="w-1 h-1 rounded-full bg-manor-green animate-pulse" />
                <span className="text-manor-green text-[0.65rem] uppercase tracking-[0.1em] font-mono font-bold">
                  BONUS: {formatRemaining(activeTimer.remainingMs)}
                </span>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="flex items-center gap-3 z-10">
        <div className="flex items-center bg-viridian-dark/40 rounded-lg p-1 border border-cream/5">
          <button
            className="btn-icon hover:text-gold transition-colors"
            onClick={onBonusTime}
            title="Add Bonus Time"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
          </button>
          
          <button
            className="btn-icon hover:text-gold transition-colors"
            onClick={onAssignRules}
            title="Settings"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
              <circle cx="12" cy="12" r="3" />
            </svg>
          </button>
        </div>

        <button
          className={`manor-toggle ${allowed ? 'active' : ''}`}
          onClick={() => onToggle(!allowed)}
        >
          <div className="knob" />
        </button>
      </div>
    </div>
  );
}
