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

interface AddClientProps {
  navigateTo: (screen: Screen) => void;
  language: Language;
  onAdd: (client: Omit<Client, 'id' | 'age' | 'lastVisit'>) => void;
}

const AddClient: React.FC<AddClientProps> = ({ navigateTo, language, onAdd }) => {
  const [name, setName] = useState('');
  const [birthDate, setBirthDate] = useState('');
  const [status, setStatus] = useState<Client['status']>('Stabiel');
  const [address, setAddress] = useState('');
  const [lat, setLat] = useState('');
  const [lng, setLng] = useState('');
  const [error, setError] = useState('');
  const [isFetchingLoc, setIsFetchingLoc] = useState(false);
  
  const t = translations[language].addClient;
  const ts = translations[language].statuses;

  const handleSave = () => {
    if (!name.trim() || !birthDate || !address.trim() || !lat || !lng) {
      setError(t.error);
      return;
    }
    setError('');
    onAdd({ 
      name, 
      birthDate, 
      status, 
      address, 
      lat: parseFloat(lat), 
      lng: parseFloat(lng) 
    });
  };

  const handleGetLocation = () => {
    if (!navigator.geolocation) {
      alert('Geolocation is not supported by your browser');
      return;
    }

    setIsFetchingLoc(true);
    navigator.geolocation.getCurrentPosition(
      (position) => {
        setLat(position.coords.latitude.toString());
        setLng(position.coords.longitude.toString());
        setIsFetchingLoc(false);
      },
      (err) => {
        console.error(err);
        alert('Could not fetch location. Please enter manually.');
        setIsFetchingLoc(false);
      }
    );
  };

  return (
    <div className="bg-background-light dark:bg-background-dark min-h-[100dvh] text-slate-900 dark:text-white">
      <header className="sticky top-0 z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 px-4 safe-area-pt pb-4">
        <div className="flex items-center justify-between">
          <button onClick={() => navigateTo('clients')} className="p-2 -ml-2 text-primary active:scale-95 transition-transform">
            <span className="material-icons">arrow_back</span>
          </button>
          <h1 className="text-xl font-bold tracking-tight">{t.title}</h1>
          <div className="w-10"></div>
        </div>
      </header>

      <main className="px-4 py-8 space-y-6">
        <div className="bg-primary/5 p-4 rounded-xl border border-primary/20 flex gap-3 mb-6">
          <span className="material-icons text-primary">info</span>
          <p className="text-xs text-slate-600 dark:text-slate-400">
            {t.privacyNote}
          </p>
        </div>

        {error && (
          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 p-3 rounded-xl text-sm flex items-center gap-2">
            <span className="material-icons text-sm">error</span>
            {error}
          </div>
        )}

        <div className="space-y-4">
          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.name}</label>
            <input 
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-800 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
              placeholder="e.g. Jan de Vries"
              type="text"
            />
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.birthDate}</label>
            <input 
              value={birthDate}
              onChange={(e) => setBirthDate(e.target.value)}
              className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-800 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
              type="date"
            />
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.status}</label>
            <select 
              value={status}
              onChange={(e) => setStatus(e.target.value as any)}
              className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-800 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
            >
              {Object.entries(ts).map(([key, label]) => (
                <option key={key} value={key}>{label}</option>
              ))}
            </select>
          </div>

          <div className="pt-4 border-t border-slate-300 dark:border-slate-800">
             <div className="space-y-4">
                <div className="space-y-1.5">
                  <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.address}</label>
                  <input 
                    value={address}
                    onChange={(e) => setAddress(e.target.value)}
                    className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-800 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white transition-all"
                    placeholder="e.g. Dorpsstraat 4, Utrecht"
                    type="text"
                  />
                </div>

                <div className="flex items-end gap-3">
                  <div className="flex-1 space-y-1.5">
                    <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.latitude}</label>
                    <input 
                      value={lat}
                      onChange={(e) => setLat(e.target.value)}
                      className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-800 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white font-mono text-xs transition-all"
                      placeholder="52.0907"
                      type="number"
                      step="0.0001"
                    />
                  </div>
                  <div className="flex-1 space-y-1.5">
                    <label className="text-xs font-bold uppercase tracking-widest text-slate-500 px-1">{t.longitude}</label>
                    <input 
                      value={lng}
                      onChange={(e) => setLng(e.target.value)}
                      className="w-full bg-surface-light dark:bg-surface-dark border border-slate-300 dark:border-slate-800 rounded-xl py-3.5 px-4 shadow-sm focus:ring-2 focus:ring-primary focus:outline-none text-slate-900 dark:text-white font-mono text-xs transition-all"
                      placeholder="5.1214"
                      type="number"
                      step="0.0001"
                    />
                  </div>
                  <button 
                    onClick={handleGetLocation}
                    type="button"
                    disabled={isFetchingLoc}
                    className="w-12 h-12 bg-primary/10 text-primary rounded-xl flex items-center justify-center active:scale-90 transition-all disabled:opacity-50"
                    title={t.getCurrentLocation}
                  >
                    <span className={`material-icons ${isFetchingLoc ? 'animate-spin' : ''}`}>
                      {isFetchingLoc ? 'refresh' : 'my_location'}
                    </span>
                  </button>
                </div>
             </div>
          </div>
        </div>

        <button 
          onClick={handleSave}
          className="w-full bg-primary hover:bg-primary/90 text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-[0.98] transition-all flex items-center justify-center gap-2 mt-8"
        >
          <span className="material-icons">person_add</span>
          {t.save}
        </button>
      </main>
    </div>
  );
};

export default AddClient;
