import React, { useState } from 'react';
import { Clock, Play, Pause, Calendar } from 'lucide-react';
import type { TimeEntry } from '../../types/index.js';

interface TimeTrackerProps {
  entries?: TimeEntry[];
  onClockIn?: () => void;
  onClockOut?: () => void;
  currentEntry?: TimeEntry | null;
}

export const TimeTracker: React.FC<TimeTrackerProps> = ({
  entries = [],
  onClockIn,
  onClockOut,
  currentEntry,
}) => {
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);

  const todayEntries = entries.filter(e => e.date === selectedDate);
  const totalHours = todayEntries.reduce((sum, e) => sum + e.hours, 0);

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Time Tracker</h2>

      <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-6 text-white mb-6">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <Clock className="w-8 h-8" />
            <div>
              <p className="text-sm opacity-90">Today's Hours</p>
              <p className="text-3xl font-bold">{totalHours.toFixed(2)}</p>
            </div>
          </div>
          
          {currentEntry ? (
            <button
              onClick={onClockOut}
              className="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-lg flex items-center gap-2 transition"
            >
              <Pause className="w-5 h-5" />
              Clock Out
            </button>
          ) : (
            <button
              onClick={onClockIn}
              className="bg-green-500 hover:bg-green-600 px-6 py-3 rounded-lg flex items-center gap-2 transition"
            >
              <Play className="w-5 h-5" />
              Clock In
            </button>
          )}
        </div>

        {currentEntry && (
          <div className="bg-white/20 rounded p-3">
            <p className="text-sm">Clocked in at {currentEntry.clockIn}</p>
          </div>
        )}
      </div>

      <div className="mb-4">
        <label className="block text-sm font-medium mb-2">View Date</label>
        <div className="relative">
          <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
          <input
            type="date"
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            className="pl-10 pr-4 py-2 border rounded-lg w-full md:w-64"
          />
        </div>
      </div>

      <div className="space-y-3">
        <h3 className="font-semibold">Time Entries</h3>
        {todayEntries.length === 0 ? (
          <p className="text-gray-500 text-center py-8">No time entries for this date</p>
        ) : (
          todayEntries.map((entry) => (
            <div key={entry.id} className="border rounded-lg p-4 flex items-center justify-between">
              <div className="flex-1">
                <div className="flex items-center gap-4 mb-2">
                  <div>
                    <span className="text-sm text-gray-500">Clock In</span>
                    <p className="font-medium">{entry.clockIn || 'N/A'}</p>
                  </div>
                  <div>
                    <span className="text-sm text-gray-500">Clock Out</span>
                    <p className="font-medium">{entry.clockOut || 'Active'}</p>
                  </div>
                  <div>
                    <span className="text-sm text-gray-500">Break</span>
                    <p className="font-medium">{entry.breakMinutes || 0} min</p>
                  </div>
                </div>
                {entry.notes && (
                  <p className="text-sm text-gray-600">{entry.notes}</p>
                )}
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold text-blue-600">{entry.hours.toFixed(2)}</p>
                <p className="text-sm text-gray-500">hours</p>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
};
