import { useMemo, useState } from 'react';
import { useAuth, useCollection, useIdentity, useNotifications, usePresence } from '@deplixo/sdk';
import { PetList } from './components/PetList.jsx';
import { PetDetail } from './components/PetDetail.jsx';

// PROGRESS:sc_001:complete:Setting up pet care dashboard
function App() {
  const { user: authUser, loading: authLoading, login, logout } = useAuth();
  const { user: identityUser, loading: identityLoading } = useIdentity();
  const { users: presenceUsers, update: updatePresence } = usePresence({
    name: authUser?.name || identityUser?.name || 'Guest',
    email: authUser?.email || identityUser?.email || ''
  });
  const { send: sendNotification } = useNotifications();

  const { items: pets, loading, add, update, remove } = useCollection('pets', { personal: true });
  const [selectedPetId, setSelectedPetId] = useState(null);
  const [activeFamilyMember, setActiveFamilyMember] = useState(() => ({
    id: identityUser?.id || authUser?.id || 'me',
    name: authUser?.name || identityUser?.name || 'Me',
    email: authUser?.email || identityUser?.email || ''
  }));

  const familyMembers = useMemo(() => {
    const members = new Map();

    const addMember = (member) => {
      if (!member?.id) return;
      members.set(member.id, {
        id: member.id,
        name: member.name || member.displayName || member.email || 'Family member',
        email: member.email || ''
      });
    };

    addMember(authUser);
    addMember(identityUser);
    addMember(activeFamilyMember);
    presenceUsers?.forEach(addMember);

    return Array.from(members.values());
  }, [authUser, identityUser, activeFamilyMember, presenceUsers]);

  const currentMember = activeFamilyMember?.id
    ? familyMembers.find((member) => member.id === activeFamilyMember.id) || activeFamilyMember
    : familyMembers[0] || activeFamilyMember;

  const enrichedPets = useMemo(() => {
    return (pets || []).map((pet) => ({
      ...pet,
      value: {
        ...pet.value,
        createdBy: pet.value?.createdBy || pet.createdBy || currentMember?.id,
        updatedBy: pet.value?.updatedBy || pet.updatedBy || currentMember?.id
      }
    }));
  }, [pets, currentMember]);

  const withOwner = (payload) => ({
    ...payload,
    createdBy: currentMember?.id,
    createdByName: currentMember?.name,
    updatedBy: currentMember?.id,
    updatedByName: currentMember?.name
  });

  const handleAuthAction = async () => {
    if (authUser) {
      await logout();
      return;
    }
    await login();
  };

  const handleSwitchMember = (memberId) => {
    const next = familyMembers.find((member) => member.id === memberId);
    if (next) {
      setActiveFamilyMember(next);
      updatePresence?.({
        name: next.name,
        email: next.email,
        activeMemberId: next.id
      });
      sendNotification?.({
        title: 'Active family member switched',
        message: `Now logging as ${next.name}`
      });
    }
  };

  const handleAddPet = async (pet) => add(withOwner(pet));
  const handleUpdatePet = async (id, pet) => update(id, withOwner(pet));

  const handleRemovePet = async (id) => remove(id);

  if (loading || authLoading || identityLoading) {
    return (
      <div className="loading-screen">
        <div className="loading-paw">🐾</div>
        <p>Loading your pets...</p>
      </div>
    );
  }

  const selectedPet = enrichedPets.find((p) => p.id === selectedPetId);

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-left">
          {selectedPet && (
            <button className="back-btn" onClick={() => setSelectedPetId(null)}>
              ← Back
            </button>
          )}
          <h1 className="app-title">🐾 PetCare</h1>
        </div>
        <div className="header-right">
          <div className="family-switcher">
            <span className="family-switcher-label">Active</span>
            <select
              className="family-switcher-select"
              value={currentMember?.id || ''}
              onChange={(e) => handleSwitchMember(e.target.value)}
            >
              {familyMembers.map((member) => (
                <option key={member.id} value={member.id}>
                  {member.name}
                </option>
              ))}
            </select>
          </div>
          <button className="auth-btn" onClick={handleAuthAction}>
            {authUser ? 'Sign out' : 'Sign in'}
          </button>
        </div>
        <p className="app-subtitle">
          {selectedPet ? selectedPet.value.name : `Logged in as ${currentMember?.name || 'Guest'}`}
        </p>
      </header>
      <main className="app-main">
        {!authUser ? (
          <div className="empty-tab-state auth-prompt">
            <span className="empty-tab-icon">🔐</span>
            <h3>Sign in to share pet care</h3>
            <p>
              Family members can switch profiles and keep their own entries for pets, vet visits,
              medications, feeding, and weights.
            </p>
            <button className="add-inline-btn" onClick={handleAuthAction}>
              Sign in
            </button>
          </div>
        ) : selectedPet ? (
          <PetDetail
            pet={selectedPet}
            onBack={() => setSelectedPetId(null)}
            onUpdatePet={handleUpdatePet}
            onRemovePet={(id) => {
              handleRemovePet(id);
              setSelectedPetId(null);
            }}
            currentUser={currentMember}
          />
        ) : (
          <PetList
            pets={enrichedPets}
            onSelect={setSelectedPetId}
            onAdd={handleAddPet}
            onUpdate={handleUpdatePet}
            onRemove={handleRemovePet}
            currentUser={currentMember}
          />
        )}
      </main>
    </div>
  );
}

// PROGRESS:sc_002:complete:App shell and navigation ready

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