
import React, { useState } from 'react';
import { Screen, WorkLog } from '../types';
import { Language, translations } from '../i18n';

interface TimeLogsProps {
  navigateTo: (screen: Screen) => void;
  language: Language;
  logs: WorkLog[];
  onAddLog: (log: WorkLog) => void;
}

const TimeLogs: React.FC<TimeLogsProps> = ({ navigateTo, language, logs, onAddLog }) => {
  const t = translations[language].timeLogs;
  const [hours, setHours] = useState('');
  const [notes, setNotes] = useState('');

  const handleSave = () => {
    if (!hours) return;
    onAddLog({
      id: Date.now().toString(),
      date: new Date().toLocaleDateString(),
      hours: parseFloat(hours),
      description: notes,
      userId: 'me'
    });
    setHours('');
    setNotes('');
  };

  return (
    <div className="bg-background-light dark:bg-background-dark min-h-[100dvh]">
      <header className="sticky top-0 z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md border-b border-slate-300 dark:border-slate-800 px-4 safe-area-pt pb-4">
        <h1 className="text-xl font-bold tracking-tight">{t.title}</h1>
      </header>

      <main className="px-4 py-6 space-y-6 pb-32">
        <section className="bg-surface-light dark:bg-surface-dark p-6 rounded-3xl shadow-sm border border-slate-300 dark:border-slate-800">
          <h2 className="text-xs font-bold text-primary uppercase tracking-widest mb-4">{t.addLog}</h2>
          <div className="space-y-4">
            <input 
              type="number" 
              placeholder={t.hours}
              value={hours}
              onChange={e => setHours(e.target.value)}
              className="w-full p-4 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-primary outline-none transition-all"
            />
            <textarea 
              placeholder={t.notes}
              value={notes}
              onChange={e => setNotes(e.target.value)}
              className="w-full p-4 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl focus:ring-2 focus:ring-primary h-24 outline-none transition-all"
            />
            <button 
              onClick={handleSave}
              className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
            >
              {t.save}
            </button>
          </div>
        </section>

        <section className="space-y-3">
          {logs.map(log => (
            <div key={log.id} className="bg-surface-light dark:bg-surface-dark p-4 rounded-2xl shadow-sm border border-slate-300 dark:border-slate-800 flex justify-between items-center transition-all hover:border-primary/20">
              <div className="flex flex-col gap-1">
                <div className="flex items-center gap-2">
                  <span className="material-icons text-[14px] text-slate-400">calendar_today</span>
                  <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">{log.date}</p>
                </div>
                <p className="text-sm font-semibold text-slate-700 dark:text-slate-200">{log.description || 'General Work'}</p>
              </div>
              <div className="text-xl font-black text-primary bg-primary/5 px-3 py-1 rounded-xl border border-primary/10">{log.hours}h</div>
            </div>
          ))}
        </section>
      </main>
    </div>
  );
};

export default TimeLogs;
