'use client';

import { useState } from 'react';

interface Props {
  pause: number;
  onPauseChange: (pause: number) => void;
}

export default function Einstellungen({ pause, onPauseChange }: Props) {
  const [raw, setRaw] = useState(String(pause).replace('.', ','));
  const [saving, setSaving] = useState(false);
  const [status, setStatus] = useState<'idle' | 'ok' | 'error'>('idle');

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setStatus('idle');
    const value = parseFloat(raw.replace(',', '.'));
    try {
      const res = await fetch('/api/settings', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pause: value }),
      });
      if (!res.ok) throw new Error();
      const data = await res.json();
      onPauseChange(data.pause);
      setRaw(String(data.pause).replace('.', ','));
      setStatus('ok');
      setTimeout(() => setStatus('idle'), 3000);
    } catch {
      setStatus('error');
    } finally {
      setSaving(false);
    }
  }

  return (
    <form onSubmit={handleSave} className="max-w-md space-y-3">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Pause (dezimale Stunden)
        </label>
        <input
          type="text"
          inputMode="decimal"
          value={raw}
          onChange={(e) => setRaw(e.target.value)}
          className="w-32 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-gray-900 text-sm focus:border-green-600 focus:outline-none"
        />
        <p className="mt-1 text-xs text-gray-500">
          Wird in der Mehrarbeit-Berechnung abgezogen: Mehrarbeit = Arbeitszeit − 8 h − Pause.
        </p>
      </div>

      <div className="flex items-center gap-3">
        <button
          type="submit"
          disabled={saving}
          className="px-6 py-1.5 bg-[#86C28B] hover:bg-[#6FB075] text-black font-medium rounded-lg transition-colors disabled:opacity-50 text-sm"
        >
          {saving ? 'Speichern...' : 'Speichern'}
        </button>
        {status === 'ok' && <span className="text-green-700 text-sm">Gespeichert.</span>}
        {status === 'error' && <span className="text-red-600 text-sm">Fehler beim Speichern.</span>}
      </div>
    </form>
  );
}