App.tsx

import React, { useState, useEffect } from 'react';
import {
  Droplets,
  Plus,
  Activity,
  Trash2,
  LayoutDashboard,
  Fish,
  Box,
} from 'lucide-react';
import { WaterReading, PARAMETERS, Aquarium, FishSpecies } from './types';
import ReadingForm from './components/ReadingForm';
import HistoryChart from './components/HistoryChart';
import AquariumList from './components/AquariumList';
import AquariumDetail from './components/AquariumDetail';
import SpeciesCatalogue from './components/SpeciesCatalogue';
import { getReadings, createReading, deleteReading, getAquariums } from './services/storage';

const SPECIES_JSON = '/data/species.json';

function App() {
  const [readings, setReadings] = useState<WaterReading[]>([]);
  const [aquariums, setAquariums] = useState<Aquarium[]>([]);
  const [speciesList, setSpeciesList] = useState<FishSpecies[]>([]);
  const [view, setView] = useState<'dashboard' | 'add' | 'history' | 'aquariums' | 'species'>('dashboard');
  const [selectedParam, setSelectedParam] = useState<keyof WaterReading | 'all'>('all');
  const [loading, setLoading] = useState(true);
  const [aquariumId, setAquariumId] = useState<string | undefined>(undefined);
  const [selectedAquariumId, setSelectedAquariumId] = useState<string | null>(null);

  const refreshReadings = async () => {
    try {
      const list = await getReadings();
      setReadings(list);
    } catch (e) {
      console.error('Failed to load readings', e);
    } finally {
      setLoading(false);
    }
  };

  const refreshAquariums = async () => {
    try {
      const list = await getAquariums();
      setAquariums(list);
    } catch (e) {
      console.error('Failed to load aquariums', e);
    }
  };

  useEffect(() => {
    refreshReadings();
    refreshAquariums();
  }, []);

  useEffect(() => {
    fetch(SPECIES_JSON)
      .then((r) => r.json())
      .then((data: FishSpecies[]) => setSpeciesList(Array.isArray(data) ? data : []))
      .catch(() => setSpeciesList([]));
  }, []);

  const handleAddReading = async (newReading: Omit<WaterReading, 'id'>) => {
    try {
      const reading = await createReading(newReading);
      setReadings(prev => [reading, ...prev]);
      setView('dashboard');
    } catch (e) {
      console.error('Failed to add reading', e);
      const msg = e instanceof Error && e.message ? e.message : 'Vérifiez la connexion au serveur.';
      alert('Impossible d\'enregistrer le relevé. ' + msg);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Êtes-vous sûr de vouloir supprimer ce relevé ?')) return;
    try {
      await deleteReading(id);
      setReadings(prev => prev.filter(r => r.id !== id));
    } catch (e) {
      console.error('Failed to delete reading', e);
      const msg = e instanceof Error && e.message ? e.message : 'Vérifiez la connexion au serveur.';
      alert('Impossible de supprimer le relevé. ' + msg);
    }
  };

  const latestReading = readings[0];

  // Helper to get color based on safety limits
  const getSafetyColor = (val: number, min: number, max: number) => {
    if (val < min || val > max) return 'text-red-700 bg-red-50 border-red-200';
    return 'text-emerald-700 bg-emerald-50 border-emerald-200';
  };

  return (
    <div className="min-h-screen bg-slate-50 pb-24 md:pb-0 font-sans text-slate-900">
      {/* Sidebar / Topbar */}
      <nav className="fixed top-0 left-0 w-full h-16 bg-white border-b border-slate-200 z-30 px-4 flex items-center justify-between md:px-8">
        <div className="flex items-center gap-2">
          <div className="bg-cyan-600 p-2 rounded-lg shadow-sm shadow-cyan-200">
            <Droplets className="text-white" size={20} />
          </div>
          <h1 className="text-xl font-bold bg-gradient-to-r from-cyan-700 to-blue-600 bg-clip-text text-transparent">
            AquaTrack
          </h1>
        </div>
        
        {/* Desktop Nav */}
        <div className="hidden md:flex items-center gap-2">
          <button
            onClick={() => { setView('dashboard'); setSelectedAquariumId(null); }}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${view === 'dashboard' ? 'bg-cyan-50 text-cyan-700' : 'text-slate-600 hover:bg-slate-50'}`}
          >
            Tableau de bord
          </button>
          <button
            onClick={() => { setView('aquariums'); setSelectedAquariumId(null); }}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${view === 'aquariums' ? 'bg-cyan-50 text-cyan-700' : 'text-slate-600 hover:bg-slate-50'}`}
          >
            Aquariums
          </button>
          <button
            onClick={() => setView('species')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${view === 'species' ? 'bg-cyan-50 text-cyan-700' : 'text-slate-600 hover:bg-slate-50'}`}
          >
            Espèces
          </button>
          <button
            onClick={() => setView('history')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${view === 'history' ? 'bg-cyan-50 text-cyan-700' : 'text-slate-600 hover:bg-slate-50'}`}
          >
            Historique
          </button>
          <button
            onClick={() => { setView('add'); setAquariumId(undefined); }}
            className="flex items-center gap-2 px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white rounded-lg text-sm font-medium transition-colors shadow-sm shadow-cyan-200"
          >
            <Plus size={16} />
            Nouveau relevé
          </button>
        </div>
      </nav>

      {/* Main Content */}
      <main className="pt-24 px-4 max-w-7xl mx-auto space-y-8">
        
        {/* Dashboard View */}
        {view === 'dashboard' && (
          <>
            {loading ? (
              <div className="bg-white rounded-2xl p-8 text-center border border-slate-200 shadow-sm">
                <p className="text-slate-500">Chargement des relevés…</p>
              </div>
            ) : readings.length > 0 ? (
            <>
            {/* Dashboard header */}
              <div className="bg-gradient-to-r from-cyan-600 to-blue-600 rounded-2xl p-6 text-white shadow-lg">
                <h2 className="text-2xl font-bold mb-2">Santé de l'aquarium</h2>
                <p className="text-cyan-100">
                  Dernier relevé le {new Date(latestReading.date).toLocaleDateString()}.
                </p>
              </div>

            {/* Parameters Grid */}
            {readings.length > 0 && (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {PARAMETERS.map((param) => {
                  const value = latestReading[param.key as keyof WaterReading] as number | undefined;
                  const hasValue = value !== undefined && value !== null && !Number.isNaN(value);
                  const statusColor = hasValue ? getSafetyColor(value, param.minSafe, param.maxSafe) : 'text-slate-500 bg-slate-50 border-slate-200';
                  return (
                    <div key={param.key} className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
                      <div className="flex justify-between items-start mb-2">
                        <span className="text-sm font-medium text-slate-500">{param.label}</span>
                        <div className="w-2 h-2 rounded-full" style={{ backgroundColor: param.color }}></div>
                      </div>
                      <div className="flex items-baseline gap-2 mb-2">
                        <span className="text-2xl font-bold text-slate-800">{hasValue ? value : '—'}</span>
                        {hasValue && <span className="text-xs text-slate-400 font-medium">{param.unit}</span>}
                      </div>
                      <div className={`text-xs px-2 py-1 rounded-md inline-block font-medium border ${statusColor}`}>
                        {hasValue ? (value >= param.minSafe && value <= param.maxSafe ? 'Optimal' : 'Attention') : 'Non renseigné'}
                      </div>
                      <p className="text-xs text-slate-400 mt-3 truncate">{param.description}</p>
                    </div>
                  );
                })}
              </div>
            )}
            </>
            ) : (
              <div className="bg-white rounded-2xl p-8 text-center border border-slate-200 shadow-sm">
                <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Droplets className="text-slate-400" size={32} />
                </div>
                <h3 className="text-lg font-semibold text-slate-800 mb-2">Aucun relevé</h3>
                <p className="text-slate-500 mb-6">Commencez par ajouter vos premiers paramètres d'eau.</p>
                <button 
                  onClick={() => setView('add')}
                  className="bg-cyan-600 text-white px-5 py-2.5 rounded-lg font-medium shadow-sm hover:bg-cyan-700 transition-colors"
                >
                  Ajouter un relevé
                </button>
              </div>
            )}
          </>
        )}

        {/* Add View */}
        {view === 'add' && (
          <div className="max-w-3xl mx-auto">
            <ReadingForm
              onSubmit={handleAddReading}
              onCancel={() => setView('dashboard')}
              aquariums={aquariums}
              aquariumId={aquariumId}
              onAquariumIdChange={setAquariumId}
            />
          </div>
        )}

        {/* Aquariums View */}
        {view === 'aquariums' && (
          <>
            {selectedAquariumId ? (
              <AquariumDetail
                aquariumId={selectedAquariumId}
                onBack={() => setSelectedAquariumId(null)}
                speciesList={speciesList}
                onAddReading={() => {
                  setAquariumId(selectedAquariumId);
                  setView('add');
                }}
              />
            ) : (
              <AquariumList onSelectAquarium={setSelectedAquariumId} />
            )}
          </>
        )}

        {/* Species View */}
        {view === 'species' && (
          <div>
            <h2 className="text-xl font-bold text-slate-800 mb-4">Catalogue des espèces</h2>
            <SpeciesCatalogue />
          </div>
        )}

        {/* History View */}
        {view === 'history' && (
          <div className="space-y-6">
            {/* Filter Chips */}
            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => setSelectedParam('all')}
                className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors border ${
                  selectedParam === 'all' 
                    ? 'bg-slate-800 text-white border-slate-800' 
                    : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
                }`}
              >
                Vue d'ensemble
              </button>
              {PARAMETERS.map(p => (
                <button
                  key={p.key}
                  onClick={() => setSelectedParam(p.key)}
                  className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors border ${
                    selectedParam === p.key
                      ? 'bg-cyan-600 text-white border-cyan-600'
                      : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
                  }`}
                >
                  {p.label.split(' ')[0]}
                </button>
              ))}
            </div>

            {/* Chart */}
            <HistoryChart readings={readings} selectedParamKey={selectedParam} />

            {/* List */}
            <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="p-4 border-b border-slate-100 bg-slate-50/50">
                <h3 className="font-semibold text-slate-800">Historique détaillé</h3>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-sm text-left">
                  <thead className="bg-slate-50 text-slate-500 font-medium border-b border-slate-200">
                    <tr>
                      <th className="px-6 py-3 whitespace-nowrap">Date</th>
                      {PARAMETERS.map(p => (
                        <th key={p.key} className="px-4 py-3 whitespace-nowrap">{p.label.split(' ')[0]}</th>
                      ))}
                      <th className="px-4 py-3 whitespace-nowrap text-right">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {readings.map((reading) => (
                      <tr key={reading.id} className="hover:bg-slate-50 transition-colors">
                        <td className="px-6 py-3 font-medium text-slate-700 whitespace-nowrap">
                          {new Date(reading.date).toLocaleDateString()}
                        </td>
                        {PARAMETERS.map(p => {
                          const val = reading[p.key as keyof WaterReading];
                          const display = val !== undefined && val !== null && val !== '' ? String(val) : '—';
                          return (
                            <td key={p.key} className="px-4 py-3 text-slate-600">
                              {display}
                            </td>
                          );
                        })}
                        <td className="px-4 py-3 text-right">
                          <button 
                            onClick={() => handleDelete(reading.id)}
                            className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors"
                            title="Supprimer"
                          >
                            <Trash2 size={16} />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}
      </main>

      {/* Mobile Navigation */}
      <nav className="md:hidden fixed bottom-0 left-0 w-full bg-white border-t border-slate-200 px-2 py-2 flex justify-around items-center z-30 pb-safe">
        <button
          onClick={() => { setView('dashboard'); setSelectedAquariumId(null); }}
          className={`flex flex-col items-center gap-0.5 p-2 rounded-lg min-w-0 ${view === 'dashboard' ? 'text-cyan-600' : 'text-slate-400'}`}
        >
          <LayoutDashboard size={22} />
          <span className="text-[9px] font-medium">Accueil</span>
        </button>
        <button
          onClick={() => { setView('aquariums'); setSelectedAquariumId(null); }}
          className={`flex flex-col items-center gap-0.5 p-2 rounded-lg min-w-0 ${view === 'aquariums' ? 'text-cyan-600' : 'text-slate-400'}`}
        >
          <Box size={22} />
          <span className="text-[9px] font-medium">Bacs</span>
        </button>
        <button
          onClick={() => setView('add')}
          className="flex flex-col items-center justify-center -mt-6"
        >
          <div className="bg-cyan-600 p-3 rounded-full shadow-lg shadow-cyan-200 text-white">
            <Plus size={26} />
          </div>
        </button>
        <button
          onClick={() => setView('species')}
          className={`flex flex-col items-center gap-0.5 p-2 rounded-lg min-w-0 ${view === 'species' ? 'text-cyan-600' : 'text-slate-400'}`}
        >
          <Fish size={22} />
          <span className="text-[9px] font-medium">Espèces</span>
        </button>
        <button
          onClick={() => setView('history')}
          className={`flex flex-col items-center gap-0.5 p-2 rounded-lg min-w-0 ${view === 'history' ? 'text-cyan-600' : 'text-slate-400'}`}
        >
          <Activity size={22} />
          <span className="text-[9px] font-medium">Suivi</span>
        </button>
      </nav>

    </div>
  );
}

export default App;