import React from 'react';
import { Clock, CheckCircle } from 'lucide-react';

export const TimeTrackingView: React.FC = () => {
  const timeEntries = [
    { date: '26.07.2026', technician: 'Max Müller', customer: 'Max Mustermann', activity: 'Heizungswartung', hours: '4.5 Std.', status: 'Freigegeben' },
    { date: '26.07.2026', technician: 'Stefan Bauer', customer: 'Anja Klein', activity: 'Thermostat-Kalibrierung', hours: '2.0 Std.', status: 'Freigegeben' },
    { date: '26.07.2026', technician: 'Tom Gerber', customer: 'Hausverwaltung Schmidt', activity: 'Leitungsspülung', hours: '3.5 Std.', status: 'Offen zur Prüfung' },
    { date: '25.07.2026', technician: 'Max Müller', customer: 'Bäckerei Hoffmann GmbH', activity: 'Pumpentausch', hours: '6.0 Std.', status: 'Abgerechnet' },
  ];

  return (
    <>
      <header className="header-bar">
        <h1 className="header-title">Zeiterfassung & Stundenzettel</h1>
        <span style={{ fontWeight: 600, color: '#10b981' }}>Gesamtstunden Heute: 16.0 Std.</span>
      </header>

      <section className="content-card">
        <h2 className="card-heading">Erfasste Arbeitszeiten der Monteure</h2>
        <table className="orders-table">
          <thead>
            <tr>
              <th>Datum</th>
              <th>Monteur</th>
              <th>Kunde / Projekt</th>
              <th>Tätigkeit</th>
              <th>Dauer</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {timeEntries.map((e, idx) => (
              <tr key={idx}>
                <td style={{ color: '#64748b' }}>{e.date}</td>
                <td style={{ fontWeight: 600, color: '#0f172a' }}>{e.technician}</td>
                <td>{e.customer}</td>
                <td style={{ color: '#334155' }}>{e.activity}</td>
                <td style={{ fontWeight: 700, color: '#2563eb' }}>{e.hours}</td>
                <td>
                  <span className={`badge ${
                    e.status === 'Freigegeben' || e.status === 'Abgerechnet' ? 'badge-in-progress' : 'badge-scheduled'
                  }`}>
                    {e.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </>
  );
};