import React from 'react';
import { CalendarDays, Plus, UserCheck } from 'lucide-react';

export const DispatchingView: React.FC = () => {
  const scheduleData = [
    { time: '08:00 - 10:00', technician: 'Max Müller', customer: 'Max Mustermann', task: 'Wartung Heizungsanlage', status: 'In Bearbeitung' },
    { time: '10:30 - 12:30', technician: 'Stefan Bauer', customer: 'Anja Klein', task: 'Thermostat Einstellung & Kalibrierung', status: 'Geplant' },
    { time: '13:00 - 15:00', technician: 'Tom Gerber', customer: 'Hausverwaltung Schmidt', task: 'Sanitär-Rohrreinigung', status: 'In Bearbeitung' },
    { time: '15:30 - 17:30', technician: 'Max Müller', customer: 'Bäckerei Hoffmann GmbH', task: 'Austausch Umwälzpumpe', status: 'Geplant' },
  ];

  return (
    <>
      <header className="header-bar">
        <h1 className="header-title">Dispatching & Auftragsdisposition</h1>
        <button style={{
          backgroundColor: '#2563eb',
          color: '#ffffff',
          border: 'none',
          padding: '10px 18px',
          borderRadius: '10px',
          fontWeight: 600,
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          cursor: 'pointer'
        }}>
          <Plus size={18} /> Neuer Einsatz
        </button>
      </header>

      <section className="content-card">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
          <h2 className="card-heading" style={{ margin: 0 }}>Tagesdisposition (Heute)</h2>
          <span style={{ fontSize: '0.9rem', color: '#64748b', fontWeight: 600 }}>10 Monteure im System</span>
        </div>

        <table className="orders-table">
          <thead>
            <tr>
              <th>Uhrzeit</th>
              <th>Monteur</th>
              <th>Kunde</th>
              <th>Aufgabe / Tätigkeit</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {scheduleData.map((item, idx) => (
              <tr key={idx}>
                <td style={{ fontWeight: 600, color: '#2563eb' }}>{item.time}</td>
                <td style={{ fontWeight: 600, color: '#0f172a' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <UserCheck size={16} color="#64748b" />
                    {item.technician}
                  </div>
                </td>
                <td>{item.customer}</td>
                <td style={{ color: '#475569' }}>{item.task}</td>
                <td>
                  <span className={`badge ${item.status === 'In Bearbeitung' ? 'badge-in-progress' : 'badge-scheduled'}`}>
                    {item.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </>
  );
};
