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

interface AgendaProps {
  navigateTo: (screen: Screen) => void;
  language: Language;
}

const Agenda: React.FC<AgendaProps> = ({ navigateTo, language }) => {
  const t = translations[language].agenda;
  const days = [
    { name: language === 'nl' ? 'Ma' : 'Mo', num: '23' },
    { name: language === 'nl' ? 'Di' : 'Tu', num: '24' },
    { name: language === 'nl' ? 'Wo' : 'We', num: '25', active: true },
    { name: language === 'nl' ? 'Do' : 'Th', num: '26' },
    { name: language === 'nl' ? 'Vr' : 'Fr', num: '27' },
    { name: language === 'nl' ? 'Za' : 'Sa', num: '28', disabled: true },
    { name: language === 'nl' ? 'Zo' : 'Su', num: '29', disabled: true },
  ];

  const handleStartRoute = (address: string) => {
    const encodedAddress = encodeURIComponent(address);
    const url = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
    window.open(url, '_blank');
  };

  return (
    <div className="bg-background-light dark:bg-background-dark min-h-screen font-display text-slate-900 dark:text-slate-100">
      <header className="px-5 pb-4 bg-background-light dark:bg-background-dark sticky top-0 z-40 pt-12">
        <div className="flex justify-between items-end mb-6">
          <div>
            <p className="text-xs font-semibold text-primary uppercase tracking-wider">{t.subtitle}</p>
            <h1 className="text-3xl font-bold mt-1 text-slate-900 dark:text-white">{t.title}</h1>
          </div>
        </div>

        <div className="bg-white dark:bg-slate-800 rounded-xl p-4 shadow-sm border border-slate-100 dark:border-slate-700/50">
          <div className="flex justify-between items-center mb-4 px-1">
            <span className="font-semibold text-slate-900 dark:text-white">Oct 2023</span>
          </div>
          <div className="flex justify-between overflow-x-auto no-scrollbar gap-2">
            {days.map((day) => (
              <div 
                key={day.num}
                className={`flex flex-col items-center min-w-[40px] py-2 rounded-lg transition-colors ${
                  day.active ? 'bg-primary text-white shadow-lg shadow-primary/30' : 'hover:bg-slate-50 dark:hover:bg-slate-700'
                }`}
              >
                <span className={`text-[10px] uppercase font-bold mb-2 ${day.active ? 'opacity-80' : 'text-slate-400'}`}>{day.name}</span>
                <span className={`text-sm font-semibold ${day.disabled ? 'text-slate-400' : ''}`}>{day.num}</span>
              </div>
            ))}
          </div>
        </div>
      </header>

      <main className="px-5 pb-32">
        <div className="flex justify-between items-center mt-6 mb-4">
          <h2 className="text-lg font-bold text-slate-900 dark:text-white">{t.today}, 25 Oct</h2>
          <button className="flex items-center gap-1 text-primary text-sm font-semibold active:opacity-70 transition-opacity">
            <span className="material-icons text-base">sync</span>
            <span>{t.sync}</span>
          </button>
        </div>

        <div className="space-y-4">
          {MOCK_APPOINTMENTS.map((apt) => (
            <div key={apt.id} className="bg-white dark:bg-slate-800 rounded-xl p-4 shadow-sm border-l-4 border-l-blue-400 border border-slate-100 dark:border-slate-700/50 flex gap-4">
              <div className="flex flex-col items-center justify-start pt-1 min-w-[50px]">
                <span className="text-sm font-bold text-slate-900 dark:text-white">{apt.startTime}</span>
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex justify-between items-start gap-2">
                  <h3 className="font-bold text-slate-900 dark:text-white truncate">{apt.clientName}</h3>
                  <span className="px-2 py-0.5 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 text-[10px] font-bold rounded uppercase whitespace-nowrap">{apt.type}</span>
                </div>
                <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 flex items-center gap-1 truncate">
                  <span className="material-icons text-xs">location_on</span>
                  {apt.address}
                </p>
                <div className="mt-4 flex gap-3">
                  <button 
                    onClick={() => handleStartRoute(apt.address)}
                    className="flex-1 bg-primary hover:bg-primary/90 text-white text-[11px] font-bold py-2 px-3 rounded-lg flex items-center justify-center gap-1 shadow-sm active:scale-[0.96] transition-all"
                  >
                    <span className="material-icons text-sm">play_arrow</span> {t.startRoute}
                  </button>
                  <button 
                    onClick={() => navigateTo('client-detail')} 
                    className="flex-1 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-600 dark:text-slate-300 text-[11px] font-bold py-2 px-3 rounded-lg active:scale-[0.96] transition-all"
                  >
                    {t.dossier}
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
};

export default Agenda;
