// DEPLOY_CONFIG: {"cron": [{"name": "weekly_water_change_reminder", "schedule": "0 9 * * 1", "action": "event", "config": {"event_type": "maintenance.weekly_water_change_reminder"}}, {"name": "monthly_filter_clean_reminder", "schedule": "0 9 1 * *", "action": "event", "config": {"event_type": "maintenance.monthly_filter_clean_reminder"}}], "triggers": [{"name": "water_parameter_danger_zone_alert", "on": "collection.add", "collection": "water_parameters", "actions": [{"type": "notification", "title": "Water parameter danger zone detected", "body": "A water parameter has entered a danger zone. Please review immediately."}, {"type": "email", "to": "alerts@deplixo.com", "subject": "Urgent: Water parameter danger zone detected", "body": "A water parameter has entered a danger zone. Please review the latest water parameter reading immediately."}]}]}
import { useState } from 'react';
import { useAuth, useCollection, capturePhoto } from '@deplixo/sdk';
import { Dashboard } from './components/Dashboard.jsx';
import { WaterTests } from './components/WaterTests.jsx';
import { WaterChanges } from './components/WaterChanges.jsx';
import { Equipment } from './components/Equipment.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('dashboard');
  const [selectedTankId, setSelectedTankId] = useState('');
  const [tankName, setTankName] = useState('');
  const [capturingTankId, setCapturingTankId] = useState('');
  const [photoNotes, setPhotoNotes] = useState('');
  const [fishSpecies, setFishSpecies] = useState('');
  const [fishCount, setFishCount] = useState('');
  const [editingFishId, setEditingFishId] = useState('');
  const [editingFishSpecies, setEditingFishSpecies] = useState('');
  const [editingFishCount, setEditingFishCount] = useState('');

  const { items: tanks = [], add: addTank, update: updateTank, loading: tanksLoading } = useCollection('tanks', { personal: true });
  const { items: tests = [] } = useCollection('waterTests', { personal: true });
  const { items: changes = [] } = useCollection('waterChanges', { personal: true });
  const { items: equipment = [] } = useCollection('equipment', { personal: true });
  const { items: photos = [], add: addPhoto, loading: photosLoading } = useCollection('photos', { personal: true });
  const { items: fish = [], add: addFish, update: updateFish, remove: removeFish } = useCollection('fish', { personal: true });

  const tabs = [
    { id: 'dashboard', label: '📊 Dashboard', icon: '📊' },
    { id: 'tests', label: '🧪 Water Tests', icon: '🧪' },
    { id: 'changes', label: '💧 Water Changes', icon: '💧' },
    { id: 'equipment', label: '🔧 Equipment', icon: '🔧' },
  ];

  const handleAddTank = async () => {
    const name = tankName.trim();
    if (!name) return;

    const newTank = await addTank({
      name,
      createdAt: new Date().toISOString(),
      isDefault: tanks.length === 0,
    });

    if (newTank?.id) {
      setSelectedTankId(newTank.id);
    }
    setTankName('');
  };

  const handleSelectTank = async (tank) => {
    if (!tank?.id) return;
    setSelectedTankId(tank.id);
    if (tank?.isDefault) {
      return;
    }
    const defaultTank = tanks.find((item) => item.isDefault);
    if (defaultTank?.id && defaultTank.id !== tank.id) {
      await updateTank(defaultTank.id, { isDefault: false });
    }
  };

  const handleCaptureTankPhoto = async (tankId) => {
    if (!tankId) return;
    setCapturingTankId(tankId);
    try {
      const result = await capturePhoto({ facing: 'environment' });
      if (result?.url) {
        await addPhoto({
          tankId,
          url: result.url,
          notes: photoNotes.trim(),
          createdAt: new Date().toISOString(),
        });
        setPhotoNotes('');
      }
    } finally {
      setCapturingTankId('');
    }
  };

  const handleAddFish = async () => {
    const species = fishSpecies.trim();
    const count = Number(fishCount);
    if (!effectiveTankId || !species || !Number.isFinite(count) || count < 0) return;

    await addFish({
      tankId: effectiveTankId,
      species,
      count: Math.floor(count),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    });
    setFishSpecies('');
    setFishCount('');
  };

  const startEditFish = (item) => {
    setEditingFishId(item.id);
    setEditingFishSpecies(item.species || '');
    setEditingFishCount(String(item.count ?? 0));
  };

  const cancelEditFish = () => {
    setEditingFishId('');
    setEditingFishSpecies('');
    setEditingFishCount('');
  };

  const handleSaveFish = async (fishId) => {
    const species = editingFishSpecies.trim();
    const count = Number(editingFishCount);
    if (!fishId || !species || !Number.isFinite(count) || count < 0) return;

    await updateFish(fishId, {
      species,
      count: Math.floor(count),
      updatedAt: new Date().toISOString(),
    });
    cancelEditFish();
  };

  const handleRemoveFish = async (fishId) => {
    if (!fishId) return;
    await removeFish(fishId);
    if (editingFishId === fishId) cancelEditFish();
  };

  if (loading) return <div className="auth-loading">Signing in...</div>;
  if (!user) {
    return (
      <div className="auth-shell">
        <div className="auth-card">
          <h1 className="app-title">🐠 AquaTrack</h1>
          <p className="app-subtitle">Aquarium Maintenance Tracker</p>
          <h2>Sign in to manage your personal aquariums</h2>
          <p>Use Google sign-in to keep each aquarium and tank scoped to your account.</p>
          <button className="btn-primary" onClick={login}>Sign in with Google</button>
        </div>
      </div>
    );
  }

  const activeTank = tanks.find((tank) => tank.id === selectedTankId) || tanks.find((tank) => tank.isDefault) || tanks[0];
  const effectiveTankId = activeTank?.id || selectedTankId;
  const scopedTests = tests.filter((item) => !effectiveTankId || item.tankId === effectiveTankId);
  const scopedChanges = changes.filter((item) => !effectiveTankId || item.tankId === effectiveTankId);
  const scopedEquipment = equipment.filter((item) => !effectiveTankId || item.tankId === effectiveTankId);
  const scopedPhotos = photos.filter((item) => !effectiveTankId || item.tankId === effectiveTankId);
  const scopedFish = fish.filter((item) => !effectiveTankId || item.tankId === effectiveTankId);
  const tankGalleryPhotos = scopedPhotos.slice().sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
  const fishInventory = scopedFish.slice().sort((a, b) => String(a.species || '').localeCompare(String(b.species || '')));
  const fishTotal = fishInventory.reduce((sum, item) => sum + (Number(item.count) || 0), 0);

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="header-row">
            <div>
              <h1 className="app-title">🐠 AquaTrack</h1>
              <p className="app-subtitle">Aquarium Maintenance Tracker</p>
            </div>
            <button className="btn-primary" onClick={logout}>Sign Out</button>
          </div>
          <p className="app-subtitle header-user">Signed in as {user.name}</p>
        </div>
      </header>

      <div className="tank-panel">
        <div className="section-container">
          <div className="section-header">
            <h2 className="section-title">Your Tanks</h2>
          </div>
          <div className="form-grid-2">
            <div className="form-field">
              <span>Tank Name</span>
              <input value={tankName} onChange={(e) => setTankName(e.target.value)} placeholder="Add a tank" />
            </div>
            <div className="form-field tank-add-field">
              <button className="btn-primary btn-full" onClick={handleAddTank}>Add Tank</button>
            </div>
          </div>
          <div className="tank-selector">
            {(tanksLoading ? [] : tanks).map((tank) => (
              <button
                key={tank.id}
                className={`tank-pill ${effectiveTankId === tank.id ? 'active' : ''}`}
                onClick={() => handleSelectTank(tank)}
              >
                {tank.name}
                {tank.isDefault ? ' • Default' : ''}
              </button>
            ))}
            {!tanksLoading && tanks.length === 0 && <span className="empty-hint">No tanks yet. Add your first tank to scope logs.</span>}
          </div>
          <div className="empty-hint">Current tank: {activeTank?.name || 'All Tanks'}</div>
        </div>
      </div>

      <nav className="tab-bar">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label.split(' ').slice(1).join(' ')}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        {activeTab === 'dashboard' && <Dashboard selectedTankId={effectiveTankId} />}
        {activeTab === 'tests' && <WaterTests selectedTankId={effectiveTankId} />}
        {activeTab === 'changes' && <WaterChanges selectedTankId={effectiveTankId} />}
        {activeTab === 'equipment' && <Equipment selectedTankId={effectiveTankId} />}

        <section className="fish-section section-container">
          <div className="section-header">
            <h2 className="section-title">Fish Inventory</h2>
            <span className="fish-total">{fishTotal} total fish</span>
          </div>

          <div className="fish-inventory-card">
            <div className="form-grid-2">
              <div className="form-field">
                <span>Species</span>
                <input
                  value={fishSpecies}
                  onChange={(e) => setFishSpecies(e.target.value)}
                  placeholder="e.g. Neon Tetra"
                  disabled={!effectiveTankId}
                />
              </div>
              <div className="form-field">
                <span>Count</span>
                <input
                  type="number"
                  min="0"
                  step="1"
                  value={fishCount}
                  onChange={(e) => setFishCount(e.target.value)}
                  placeholder="0"
                  disabled={!effectiveTankId}
                />
              </div>
            </div>
            <div className="fish-actions-row">
              <button className="btn-primary" onClick={handleAddFish} disabled={!effectiveTankId}>Add Species</button>
              {!effectiveTankId && <span className="empty-hint">Select a tank to manage fish inventory.</span>}
            </div>
          </div>

          {fishInventory.length === 0 ? (
            <div className="empty-state empty-state-compact">
              <span className="empty-icon">🐟</span>
              <p>No fish inventory for this tank yet.</p>
              <span className="empty-hint">Add species and counts to keep track of livestock per tank.</span>
            </div>
          ) : (
            <div className="fish-list">
              {fishInventory.map((item) => {
                const isEditing = editingFishId === item.id;
                return (
                  <div key={item.id} className="fish-card">
                    {isEditing ? (
                      <>
                        <div className="form-grid-2">
                          <div className="form-field">
                            <span>Species</span>
                            <input value={editingFishSpecies} onChange={(e) => setEditingFishSpecies(e.target.value)} />
                          </div>
                          <div className="form-field">
                            <span>Count</span>
                            <input type="number" min="0" step="1" value={editingFishCount} onChange={(e) => setEditingFishCount(e.target.value)} />
                          </div>
                        </div>
                        <div className="fish-actions-row fish-actions-end">
                          <button className="btn-primary" onClick={() => handleSaveFish(item.id)}>Save</button>
                          <button className="btn-secondary" onClick={cancelEditFish}>Cancel</button>
                          <button className="btn-delete btn-icon" onClick={() => handleRemoveFish(item.id)} aria-label="Remove species">🗑️</button>
                        </div>
                      </>
                    ) : (
                      <>
                        <div className="fish-card-main">
                          <strong className="fish-species">{item.species}</strong>
                          <span className="fish-count">{item.count} {Number(item.count) === 1 ? 'fish' : 'fish'}</span>
                        </div>
                        <div className="fish-actions-row fish-actions-end">
                          <button className="btn-secondary" onClick={() => startEditFish(item)}>Edit</button>
                          <button className="btn-delete btn-icon" onClick={() => handleRemoveFish(item.id)} aria-label="Remove species">🗑️</button>
                        </div>
                      </>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </section>

        <section className="photo-section section-container">
          <div className="section-header">
            <h2 className="section-title">Tank Photos</h2>
            <button className="btn-primary" onClick={() => handleCaptureTankPhoto(effectiveTankId)} disabled={!effectiveTankId || capturingTankId === effectiveTankId}>
              {capturingTankId === effectiveTankId ? 'Opening Camera...' : 'Take Photo'}
            </button>
          </div>

          <div className="form-field">
            <span>Photo Notes</span>
            <textarea
              value={photoNotes}
              onChange={(e) => setPhotoNotes(e.target.value)}
              placeholder="Optional notes for this tank photo"
              rows="2"
            />
          </div>

          {photosLoading ? (
            <div className="empty-state">
              <span className="empty-icon">📷</span>
              <p>Loading photos...</p>
            </div>
          ) : tankGalleryPhotos.length === 0 ? (
            <div className="empty-state">
              <span className="empty-icon">📷</span>
              <p>No photos for this tank yet.</p>
              <span className="empty-hint">Capture a photo to build a per-tank gallery.</span>
            </div>
          ) : (
            <div className="photo-grid">
              {tankGalleryPhotos.map((photo) => (
                <figure key={photo.id} className="photo-card">
                  <img src={photo.url} alt={photo.notes || `${activeTank?.name || 'Tank'} photo`} className="photo-image" />
                  <figcaption className="photo-caption">
                    <span className="photo-date">{photo.createdAt ? new Date(photo.createdAt).toLocaleString() : 'Recently'}</span>
                    {photo.notes ? <span className="photo-notes">{photo.notes}</span> : null}
                  </figcaption>
                </figure>
              ))}
            </div>
          )}
        </section>
      </main>

      <div className="sr-only" aria-hidden="true">
        {scopedTests.length}{scopedChanges.length}{scopedEquipment.length}{scopedPhotos.length}{scopedFish.length}
      </div>
    </div>
  );
}

export default App;


ReactDOM.createRoot(document.getElementById('root')).render(<App />);