import { useState } from 'react';
import { 
  Bot, 
  Package, 
  Settings, 
  Play, 
  Pause,
  RotateCcw,
  CheckCircle,
  AlertCircle,
  Clock,
  MapPin,
  Wrench
} from 'lucide-react';
import { useAWPStore } from '../store/awpStore';
import { AIWorkPackageGenerator } from './AIWorkPackageGenerator';
import { ElementMetadata } from './ElementMetadata';

const tabs = [
  { id: 'metadata', label: 'Metadata', icon: Settings },
  { id: 'ai-wp', label: 'AI WP Generator', icon: Bot },
  { id: 'packages', label: 'Work Packages', icon: Package },
];

export function MetadataPanel() {
  const [activeTab, setActiveTab] = useState('metadata');
  const { selectedElement, workPackages } = useAWPStore();

  const renderTabContent = () => {
    switch (activeTab) {
      case 'metadata':
        return <ElementMetadata elementId={selectedElement} />;
      case 'ai-wp':
        return <AIWorkPackageGenerator />;
      case 'packages':
        return <WorkPackageList packages={workPackages} />;
      default:
        return null;
    }
  };

  return (
    <div className="h-full bg-industrial-800 flex flex-col">
      {/* Tab Navigation */}
      <div className="flex border-b border-industrial-600">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex-1 flex items-center justify-center gap-2 py-3 px-2 text-xs font-medium transition-colors ${
                activeTab === tab.id
                  ? 'text-accent-cyan border-b-2 border-accent-cyan bg-accent-cyan/10'
                  : 'text-industrial-400 hover:text-industrial-200 hover:bg-industrial-700'
              }`}
            >
              <Icon className="w-4 h-4" />
              <span className="hidden sm:inline">{tab.label}</span>
            </button>
          );
        })}
      </div>

      {/* Tab Content */}
      <div className="flex-1 overflow-auto">
        {renderTabContent()}
      </div>
    </div>
  );
}

function WorkPackageList({ packages }) {
  if (packages.length === 0) {
    return (
      <div className="h-full flex flex-col items-center justify-center p-6 text-center">
        <Package className="w-12 h-12 text-industrial-600 mb-3" />
        <h3 className="text-sm font-medium text-industrial-300 mb-1">No Work Packages</h3>
        <p className="text-xs text-industrial-500">
          Use the AI WP Generator to create installation work packages
        </p>
      </div>
    );
  }

  return (
    <div className="p-3 space-y-2">
      {packages.map((wp) => (
        <div 
          key={wp.id}
          className="p-3 bg-industrial-700 rounded-lg border border-industrial-600 hover:border-accent-cyan/50 transition-colors"
        >
          <div className="flex items-start justify-between mb-2">
            <div>
              <h4 className="text-sm font-medium text-white">{wp.name}</h4>
              <p className="text-xs text-industrial-400">{wp.id}</p>
            </div>
            <span className={`px-2 py-0.5 rounded text-xs ${
              wp.status === 'optimized' ? 'bg-status-installed/20 text-status-installed' :
              wp.status === 'pending' ? 'bg-status-ready/20 text-status-ready' :
              'bg-status-constrained/20 text-status-constrained'
            }`}>
              {wp.status}
            </span>
          </div>
          
          <div className="grid grid-cols-2 gap-2 text-xs">
            <div className="flex items-center gap-1.5 text-industrial-300">
              <Clock className="w-3 h-3" />
              <span>{wp.duration}h</span>
            </div>
            <div className="flex items-center gap-1.5 text-industrial-300">
              <MapPin className="w-3 h-3" />
              <span>{wp.location}</span>
            </div>
            <div className="flex items-center gap-1.5 text-industrial-300">
              <Wrench className="w-3 h-3" />
              <span>{wp.crew} crew</span>
            </div>
            <div className="flex items-center gap-1.5 text-industrial-300">
              <CheckCircle className="w-3 h-3" />
              <span>{wp.elements.length} elements</span>
            </div>
          </div>

          {wp.constraints.length > 0 && (
            <div className="mt-2 pt-2 border-t border-industrial-600">
              <p className="text-xs text-industrial-400 mb-1">Constraints:</p>
              <div className="flex flex-wrap gap-1">
                {wp.constraints.map((c, i) => (
                  <span key={i} className="px-1.5 py-0.5 bg-industrial-600 rounded text-xs text-industrial-300">
                    {c}
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}