import React, { useState, useEffect } from 'react';
import './styles.css';

interface Label { id: number; name: string; color: string; count: number; }

export default function LabelManager() {
  const [labels, setLabels] = useState<Label[]>([]);
  const [newLabel, setNewLabel] = useState({ name: '', color: '#3b82f6' });

  useEffect(() => {
    setLabels([
      { id: 1, name: 'VIP', color: '#fbbf24', count: 12 },
      { id: 2, name: 'New Client', color: '#3b82f6', count: 28 },
      { id: 3, name: 'Urgent', color: '#ef4444', count: 5 },
      { id: 4, name: 'Follow-up Required', color: '#f59e0b', count: 15 }
    ]);
  }, []);

  const handleCreate = () => {
    if (!newLabel.name) return;
    setLabels([...labels, { ...newLabel, id: Date.now(), count: 0 }]);
    setNewLabel({ name: '', color: '#3b82f6' });
  };

  return (
    <div className="label-manager">
      <header>
        <h1>🏷️ Label Manager</h1>
      </header>
      <div className="create-section">
        <h2>Create New Label</h2>
        <div className="create-form">
          <input type="text" placeholder="Label name" value={newLabel.name} onChange={(e) => setNewLabel({...newLabel, name: e.target.value})} />
          <input type="color" value={newLabel.color} onChange={(e) => setNewLabel({...newLabel, color: e.target.value})} />
          <button onClick={handleCreate}>➕ Create Label</button>
        </div>
      </div>
      <div className="labels-grid">
        {labels.map(label => (
          <div key={label.id} className="label-card">
            <div className="label-preview" style={{ backgroundColor: label.color + '20', borderColor: label.color }}>
              <span style={{ color: label.color }}>●</span>
              <span style={{ color: label.color }}>{label.name}</span>
            </div>
            <div className="label-info">
              <span className="usage">{label.count} appointments</span>
              <div className="label-actions">
                <button>✏️ Edit</button>
                <button className="danger">🗑️ Delete</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
