import { useEffect, useMemo, useState } from 'react';
import flockPalLandingArt from './assets/flockpal-landing-art.png';
import { findParrotWeightReference, parrotSpeciesOptions, type ParrotWeightReference } from './parrotWeightReference';

type BillingPlan = 'rescue_free' | 'household_basic' | 'household_plus' | 'household_macaw';
type HouseholdBillingPlan = Exclude<BillingPlan, 'rescue_free'>;
type WorkspaceType = 'standard' | 'rescue';
type WorkspaceRole = 'owner' | 'assistant' | 'caregiver' | 'viewer';
type SubscriptionStatus = 'active' | 'trialing' | 'past_due' | 'canceled' | 'unpaid' | 'none';
type RescueVerificationStatus = 'not_required' | 'pending' | 'approved' | 'rejected';
type IntegrationTokenScope = 'read_only' | 'read_write';
type BirdGender = 'unknown' | 'male' | 'female';

type Bird = {
  id: string;
  workspaceId?: number;
  name: string;
  tagId: string;
  species: string;
  gender: BirdGender;
  dateOfBirth: string | null;
  gotchaDay: string | null;
  chartColor: string;
  photoDataUrl: string | null;
  notifyOnDob: boolean;
  notifyOnGotchaDay: boolean;
  createdAt: string;
  latestWeightGrams: number | null;
  latestRecordedOn: string | null;
};

type WeightRecord = {
  id: string;
  birdId: string;
  weightGrams: number;
  recordedOn: string;
  notes: string | null;
};

type VetVisit = {
  id: string;
  birdId: string;
  visitedOn: string;
  clinicName: string;
  reason: string;
  notes: string | null;
};

type Workspace = {
  id: number;
  name: string;
  workspaceType: WorkspaceType;
  billingEmail: string | null;
  billingPlan: BillingPlan;
  subscriptionStatus: SubscriptionStatus;
  rescueVerificationStatus: RescueVerificationStatus;
  createdAt: string;
  updatedAt: string;
};

type WorkspaceMember = {
  id: string;
  workspaceId: number;
  userId?: string | null;
  inviteEmail?: string;
  name: string;
  email?: string;
  role: WorkspaceRole;
  acceptedAt?: string | null;
  createdAt: string;
};

type WorkspaceSummary = {
  membership: WorkspaceMember;
  workspace: Workspace;
};

type AuthProvider = {
  providerKey: 'google' | 'microsoft' | 'apple';
  displayName: string;
  enabled: boolean;
};

type AuthUser = {
  id: string;
  email: string;
  name: string;
  createdAt: string;
};

type AuthSessionPayload = {
  user: AuthUser;
  activeWorkspace: Workspace;
  activeMembership: WorkspaceMember;
  workspaces: WorkspaceSummary[];
  isAdmin: boolean;
  providers: AuthProvider[];
};

type AdminSummary = {
  totalBirds: number;
  totalUsers: number;
  totalWorkspaces: number;
  rescueWorkspaces: number;
  pendingRescues: number;
  dailyUsers: number;
};

type AdminRescueWorkspace = {
  workspace: Workspace;
  ownerEmail: string | null;
  birdCount: number;
  memberCount: number;
};

type IntegrationTokenSummary = {
  id: string;
  userId: string;
  workspaceId: number;
  name: string;
  tokenPrefix: string;
  scope: IntegrationTokenScope;
  lastUsedAt: string | null;
  expiresAt: string | null;
  revokedAt: string | null;
  createdAt: string;
};

type IntegrationTokenFormState = {
  name: string;
  scope: IntegrationTokenScope;
  expiresInDays: string;
};

type BirdFormState = {
  name: string;
  tagId: string;
  species: string;
  gender: BirdGender;
  dateOfBirth: string;
  gotchaDay: string;
  chartColor: string;
  photoDataUrl: string;
  notifyOnDob: boolean;
  notifyOnGotchaDay: boolean;
};

type WorkspaceFormState = {
  name: string;
  workspaceType: WorkspaceType;
  billingEmail: string;
  billingPlan: HouseholdBillingPlan;
};

type WorkspaceMemberFormState = {
  name: string;
  email: string;
  role: WorkspaceRole;
};

type WorkspaceCreateFormState = {
  name: string;
  workspaceType: WorkspaceType;
  billingEmail: string;
  billingPlan: HouseholdBillingPlan;
};

type AuthFormState = {
  name: string;
  email: string;
};

type AuthNotice = {
  message: string;
  previewUrl?: string | null;
};

type BulkWeightRowState = {
  weightGrams: string;
};

type BirdWeightAssessment =
  | {
      status: 'no_match';
      reference: null;
    }
  | {
      status: 'no_weight';
      reference: ParrotWeightReference;
    }
  | {
      status: 'reference_only';
      reference: Extract<ParrotWeightReference, { kind: 'approximate' }>;
    }
  | {
      status: 'within' | 'below' | 'above';
      reference: Extract<ParrotWeightReference, { kind: 'range' }>;
      varianceGrams: number;
    };

type OutOfRangeBirdWeightAssessment = {
  status: 'below' | 'above';
  reference: Extract<ParrotWeightReference, { kind: 'range' }>;
  varianceGrams: number;
};

type PhotoCropState = {
  sourceDataUrl: string;
  fileName: string;
  naturalWidth: number;
  naturalHeight: number;
  zoom: number;
  offsetX: number;
  offsetY: number;
};

type PhotoDragState = {
  pointerId: number;
  startX: number;
  startY: number;
  startOffsetX: number;
  startOffsetY: number;
};

type AppPage = 'overview' | 'flock' | 'settings' | 'admin';
type SettingsSection = 'collaborators' | 'integration-tokens' | 'new-workspace' | 'flock-member' | 'transfer';

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:5000/api';
const sessionTokenStorageKey = 'flockpal_auth_token';
const emptyBirdForm: BirdFormState = {
  name: '',
  tagId: '',
  species: '',
  gender: 'unknown',
  dateOfBirth: '',
  gotchaDay: '',
  chartColor: '#cb3a35',
  photoDataUrl: '',
  notifyOnDob: false,
  notifyOnGotchaDay: false,
};

const emptyWorkspaceForm: WorkspaceFormState = {
  name: 'My Flock',
  workspaceType: 'standard',
  billingEmail: '',
  billingPlan: 'household_basic',
};

const emptyWorkspaceMemberForm: WorkspaceMemberFormState = {
  name: '',
  email: '',
  role: 'caregiver',
};

const emptyWorkspaceCreateForm: WorkspaceCreateFormState = {
  name: '',
  workspaceType: 'standard',
  billingEmail: '',
  billingPlan: 'household_basic',
};

const emptyAuthForm: AuthFormState = {
  name: '',
  email: '',
};

const emptyIntegrationTokenForm: IntegrationTokenFormState = {
  name: '',
  scope: 'read_write',
  expiresInDays: '',
};

const defaultAuthProviders: AuthProvider[] = [
  { providerKey: 'google', displayName: 'Google', enabled: false },
  { providerKey: 'microsoft', displayName: 'Microsoft', enabled: false },
  { providerKey: 'apple', displayName: 'Apple', enabled: false },
];

const ProviderIcon = ({ providerKey }: { providerKey: AuthProvider['providerKey'] }) => {
  if (providerKey === 'google') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" className="provider-icon-svg">
        <path
          d="M21.8 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.5a4.7 4.7 0 0 1-2 3.1v2.6h3.2c1.9-1.8 3.1-4.4 3.1-7.5Z"
          fill="#4285F4"
        />
        <path
          d="M12 22c2.7 0 4.9-.9 6.6-2.4l-3.2-2.6c-.9.6-2 .9-3.4.9-2.6 0-4.8-1.8-5.6-4.1H3.1v2.7A10 10 0 0 0 12 22Z"
          fill="#34A853"
        />
        <path
          d="M6.4 13.8a6 6 0 0 1 0-3.7V7.4H3.1a10 10 0 0 0 0 9l3.3-2.6Z"
          fill="#FBBC05"
        />
        <path
          d="M12 6.1c1.5 0 2.8.5 3.9 1.5l2.9-2.9A10 10 0 0 0 3.1 7.4l3.3 2.7C7.2 7.8 9.4 6.1 12 6.1Z"
          fill="#EA4335"
        />
      </svg>
    );
  }

  if (providerKey === 'microsoft') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" className="provider-icon-svg">
        <rect x="2" y="2" width="9" height="9" fill="#f25022" />
        <rect x="13" y="2" width="9" height="9" fill="#7fba00" />
        <rect x="2" y="13" width="9" height="9" fill="#00a4ef" />
        <rect x="13" y="13" width="9" height="9" fill="#ffb900" />
      </svg>
    );
  }

  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="provider-icon-svg provider-icon-apple">
      <path
        d="M16.7 12.8c0-2.2 1.8-3.3 1.9-3.4-1-1.5-2.7-1.7-3.2-1.7-1.4-.1-2.7.8-3.4.8-.7 0-1.8-.8-2.9-.8-1.5 0-2.9.9-3.7 2.2-1.6 2.7-.4 6.7 1.2 8.9.8 1.1 1.7 2.3 2.9 2.2 1.1 0 1.6-.7 3-.7s1.8.7 3 .7c1.2 0 2-.9 2.8-2 .9-1.2 1.2-2.5 1.2-2.5-.1 0-2.8-1.1-2.8-3.7Zm-2.2-6.6c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.6.7-1.1 1.7-1 2.7 1 .1 2-.5 2.7-1.3Z"
        fill="currentColor"
      />
    </svg>
  );
};

const sortBirdsByName = (nextBirds: Bird[]) => [...nextBirds].sort((left, right) => left.name.localeCompare(right.name));

const toBirdForm = (bird: Bird): BirdFormState => ({
  name: bird.name,
  tagId: bird.tagId,
  species: bird.species,
  gender: bird.gender,
  dateOfBirth: bird.dateOfBirth ?? '',
  gotchaDay: bird.gotchaDay ?? '',
  chartColor: bird.chartColor,
  photoDataUrl: bird.photoDataUrl ?? '',
  notifyOnDob: bird.notifyOnDob,
  notifyOnGotchaDay: bird.notifyOnGotchaDay,
});

const formatDate = (value: string | null) => {
  if (!value) {
    return 'Not set';
  }

  return new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  }).format(new Date(`${value}T00:00:00`));
};

const formatShortDate = (value: string | null) => {
  if (!value) {
    return 'No data yet';
  }

  return new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: 'numeric',
  }).format(new Date(`${value}T00:00:00`));
};

const getBirdGenderLabel = (bird: Pick<Bird, 'gender'>) => {
  if (bird.gender === 'female') {
    return 'Female';
  }
  if (bird.gender === 'male') {
    return 'Male';
  }
  return 'Unknown';
};

const getBirdGenderSymbol = (bird: Pick<Bird, 'gender'>) => {
  if (bird.gender === 'female') {
    return '♀';
  }
  if (bird.gender === 'male') {
    return '♂';
  }
  return '?';
};

const formatDateTime = (value: string | null) => {
  if (!value) {
    return 'Never';
  }

  return new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  }).format(new Date(value));
};

const formatWeight = (value: number | null) => (value ? `${value.toFixed(1)} g` : 'Pending');
const formatRange = (minGrams: number, maxGrams: number) => `${minGrams.toFixed(0)}-${maxGrams.toFixed(0)} g`;
const parseDateValue = (value: string) => new Date(`${value}T00:00:00`);
const OVERVIEW_WIDTH = 520;
const OVERVIEW_HEIGHT = 220;
const OVERVIEW_PADDING = { top: 20, right: 18, bottom: 36, left: 52 };
const PHOTO_MAX_BYTES = 900_000;
const PHOTO_EXPORT_SIZES = [720, 600, 480];
const PHOTO_EXPORT_QUALITIES = [0.9, 0.82, 0.74, 0.66];
const PHOTO_PREVIEW_SIZE = 112;
const MEMBER_CHART_WIDTH = 520;
const MEMBER_CHART_HEIGHT = 180;
const MEMBER_CHART_PADDING = { top: 16, right: 18, bottom: 34, left: 52 };

const readJsonSafely = async <T,>(response: Response): Promise<T | null> => {
  const contentType = response.headers.get('content-type') ?? '';

  if (!contentType.includes('application/json')) {
    return null;
  }

  try {
    return (await response.json()) as T;
  } catch {
    return null;
  }
};

const readErrorMessage = async (response: Response, fallback: string) => {
  const json = await readJsonSafely<{ error?: string }>(response);

  if (json?.error) {
    return json.error;
  }

  const text = await response.text();
  const trimmed = text.trim();

  if (!trimmed) {
    return fallback;
  }

  if (trimmed.startsWith('<!DOCTYPE') || trimmed.startsWith('<html')) {
    return fallback;
  }

  return trimmed;
};

const createApiHeaders = (token?: string, headers?: HeadersInit) => {
  const nextHeaders = new Headers(headers);

  if (token) {
    nextHeaders.set('Authorization', `Bearer ${token}`);
  }

  return nextHeaders;
};

const apiFetch = (path: string, token?: string, init?: RequestInit) =>
  fetch(`${apiBaseUrl}${path}`, {
    ...init,
    cache: 'no-store',
    headers: createApiHeaders(token, init?.headers),
  });

const persistSessionToken = (token: string) => {
  window.localStorage.setItem(sessionTokenStorageKey, token);
};

const clearSessionToken = () => {
  window.localStorage.removeItem(sessionTokenStorageKey);
};

const readStoredSessionToken = () => window.localStorage.getItem(sessionTokenStorageKey) ?? '';

const oauthStartUrl = (providerKey: AuthProvider['providerKey']) => {
  const url = new URL(`${apiBaseUrl}/auth/oauth/${providerKey}/start`, window.location.origin);
  url.searchParams.set('redirectTo', window.location.href);
  return url.toString();
};

const isHouseholdPlan = (billingPlan: BillingPlan): billingPlan is HouseholdBillingPlan =>
  billingPlan === 'household_basic' || billingPlan === 'household_plus' || billingPlan === 'household_macaw';

const formatBillingPlanName = (billingPlan: BillingPlan) => {
  if (billingPlan === 'rescue_free') {
    return 'Rescue Free';
  }

  if (billingPlan === 'household_basic') {
    return 'Conure';
  }

  if (billingPlan === 'household_plus') {
    return 'Indian Ringneck';
  }

  return 'Macaw';
};

const formatBillingPlanCapacity = (billingPlan: BillingPlan) => {
  if (billingPlan === 'rescue_free') {
    return 'No billing is applied to rescue flocks.';
  }

  if (billingPlan === 'household_basic') {
    return 'Permits up to 4 birds in the flock.';
  }

  if (billingPlan === 'household_plus') {
    return 'Permits 5 to 10 birds in the flock.';
  }

  return 'Permits 11 or more birds in the flock.';
};

const formatBillingPlanBirdLimit = (billingPlan: BillingPlan) => {
  if (billingPlan === 'household_basic') {
    return '4';
  }

  if (billingPlan === 'household_plus') {
    return '10';
  }

  if (billingPlan === 'household_macaw') {
    return '11+';
  }

  return null;
};

const formatSubscriptionStatus = (status: SubscriptionStatus) => {
  if (status === 'trialing') {
    return 'Trialing';
  }
  if (status === 'past_due') {
    return 'Past due';
  }
  if (status === 'canceled') {
    return 'Canceled';
  }
  if (status === 'unpaid') {
    return 'Unpaid';
  }
  if (status === 'none') {
    return 'No subscription';
  }
  return 'Active';
};

const formatRescueVerificationStatus = (status: RescueVerificationStatus) => {
  if (status === 'approved') {
    return 'Approved';
  }
  if (status === 'rejected') {
    return 'Rejected';
  }
  if (status === 'not_required') {
    return 'Not required';
  }
  return 'Pending verification';
};

const formatWorkspaceRole = (role: WorkspaceRole) => {
  if (role === 'owner') {
    return 'Owner';
  }
  if (role === 'assistant') {
    return 'Assistant';
  }
  if (role === 'caregiver') {
    return 'Caregiver';
  }
  return 'Viewer';
};

const readFileAsDataUrl = async (file: File) =>
  new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '');
    reader.onerror = () => reject(new Error('Unable to read that photo.'));
    reader.readAsDataURL(file);
  });

const loadImageElement = async (sourceDataUrl: string) =>
  new Promise<HTMLImageElement>((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('Unable to prepare that photo for cropping.'));
    image.src = sourceDataUrl;
  });

const blobToDataUrl = async (blob: Blob) =>
  new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '');
    reader.onerror = () => reject(new Error('Unable to finalize that cropped photo.'));
    reader.readAsDataURL(blob);
  });

const canvasToBlob = async (canvas: HTMLCanvasElement, quality: number) =>
  new Promise<Blob>((resolve, reject) => {
    canvas.toBlob(
      (blob) => {
        if (!blob) {
          reject(new Error('Unable to export that cropped photo.'));
          return;
        }

        resolve(blob);
      },
      'image/webp',
      quality,
    );
  });

const exportCroppedPhoto = async (cropState: PhotoCropState) => {
  const image = await loadImageElement(cropState.sourceDataUrl);
  const shortestSide = Math.min(cropState.naturalWidth, cropState.naturalHeight);
  const cropSize = shortestSide / cropState.zoom;
  const maxOffsetX = Math.max(0, (cropState.naturalWidth - cropSize) / 2);
  const maxOffsetY = Math.max(0, (cropState.naturalHeight - cropSize) / 2);
  const sourceX = Math.min(
    cropState.naturalWidth - cropSize,
    Math.max(0, (cropState.naturalWidth - cropSize) / 2 + (cropState.offsetX / 100) * maxOffsetX),
  );
  const sourceY = Math.min(
    cropState.naturalHeight - cropSize,
    Math.max(0, (cropState.naturalHeight - cropSize) / 2 + (cropState.offsetY / 100) * maxOffsetY),
  );

  let bestBlob: Blob | null = null;

  for (const size of PHOTO_EXPORT_SIZES) {
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const context = canvas.getContext('2d');

    if (!context) {
      throw new Error('Unable to prepare the crop tool in this browser.');
    }

    context.imageSmoothingEnabled = true;
    context.imageSmoothingQuality = 'high';
    context.drawImage(image, sourceX, sourceY, cropSize, cropSize, 0, 0, size, size);

    for (const quality of PHOTO_EXPORT_QUALITIES) {
      const blob = await canvasToBlob(canvas, quality);

      if (!bestBlob || blob.size < bestBlob.size) {
        bestBlob = blob;
      }

      if (blob.size <= PHOTO_MAX_BYTES) {
        return blobToDataUrl(blob);
      }
    }
  }

  if (!bestBlob) {
    throw new Error('Unable to export that cropped photo.');
  }

  if (bestBlob.size > PHOTO_MAX_BYTES) {
    throw new Error('That photo is still too large after cropping. Try zooming in a little more.');
  }

  return blobToDataUrl(bestBlob);
};

const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));

const getPhotoCropMetrics = (cropState: PhotoCropState, frameSize = PHOTO_PREVIEW_SIZE) => {
  const shortestSide = Math.min(cropState.naturalWidth, cropState.naturalHeight);
  const cropSize = shortestSide / cropState.zoom;
  const scale = frameSize / cropSize;
  const displayWidth = cropState.naturalWidth * scale;
  const displayHeight = cropState.naturalHeight * scale;
  const maxOffsetX = Math.max(0, (cropState.naturalWidth - cropSize) / 2);
  const maxOffsetY = Math.max(0, (cropState.naturalHeight - cropSize) / 2);
  const left = (frameSize - displayWidth) / 2 - (cropState.offsetX / 100) * maxOffsetX * scale;
  const top = (frameSize - displayHeight) / 2 - (cropState.offsetY / 100) * maxOffsetY * scale;

  return {
    left,
    top,
    displayWidth,
    displayHeight,
    scale,
    maxOffsetX,
    maxOffsetY,
  };
};

const chartPath = (points: WeightRecord[], width = 520, height = 180) => {
  if (!points.length) {
    return '';
  }

  const weights = points.map((point) => point.weightGrams);
  const min = Math.min(...weights);
  const max = Math.max(...weights);
  const spread = Math.max(max - min, 1);

  return points
    .map((point, index) => {
      const x = (index / Math.max(points.length - 1, 1)) * width;
      const y = height - ((point.weightGrams - min) / spread) * (height - 24) - 12;
      return `${index === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    })
    .join(' ');
};

const chartDots = (points: WeightRecord[], width = 520, height = 180) => {
  if (!points.length) {
    return [];
  }

  const weights = points.map((point) => point.weightGrams);
  const min = Math.min(...weights);
  const max = Math.max(...weights);
  const spread = Math.max(max - min, 1);

  return points.map((point, index) => ({
    id: point.id,
    x: (index / Math.max(points.length - 1, 1)) * width,
    y: height - ((point.weightGrams - min) / spread) * (height - 24) - 12,
    label: `${point.weightGrams.toFixed(1)} g on ${formatShortDate(point.recordedOn)}`,
  }));
};

const buildOverviewSeries = (points: WeightRecord[], minWeight: number, maxWeight: number, startDate: Date, endDate: Date) => {
  const innerWidth = OVERVIEW_WIDTH - OVERVIEW_PADDING.left - OVERVIEW_PADDING.right;
  const innerHeight = OVERVIEW_HEIGHT - OVERVIEW_PADDING.top - OVERVIEW_PADDING.bottom;
  const weightSpread = Math.max(maxWeight - minWeight, 1);
  const startMs = startDate.getTime();
  const endMs = endDate.getTime();
  const dateSpread = Math.max(endMs - startMs, 24 * 60 * 60 * 1000);

  return points.map((point) => {
    const pointTime = parseDateValue(point.recordedOn).getTime();
    const x = OVERVIEW_PADDING.left + ((pointTime - startMs) / dateSpread) * innerWidth;
    const y = OVERVIEW_PADDING.top + (1 - (point.weightGrams - minWeight) / weightSpread) * innerHeight;

    return {
      id: point.id,
      x,
      y,
      label: `${point.weightGrams.toFixed(1)} g on ${formatShortDate(point.recordedOn)}`,
    };
  });
};

const toOverviewPath = (points: { x: number; y: number }[]) =>
  points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x.toFixed(1)} ${point.y.toFixed(1)}`).join(' ');

const assessBirdWeight = (bird: Bird): BirdWeightAssessment => {
  const reference = findParrotWeightReference(bird.species);

  if (!reference) {
    return {
      status: 'no_match',
      reference: null,
    };
  }

  if (bird.latestWeightGrams === null) {
    return {
      status: 'no_weight',
      reference,
    };
  }

  if (reference.kind === 'approximate') {
    return {
      status: 'reference_only',
      reference,
    };
  }

  if (bird.latestWeightGrams < reference.minGrams) {
    return {
      status: 'below',
      reference,
      varianceGrams: reference.minGrams - bird.latestWeightGrams,
    };
  }

  if (bird.latestWeightGrams > reference.maxGrams) {
    return {
      status: 'above',
      reference,
      varianceGrams: bird.latestWeightGrams - reference.maxGrams,
    };
  }

  return {
    status: 'within',
    reference,
    varianceGrams: 0,
  };
};

function App() {
  const [activePage, setActivePage] = useState<AppPage>('overview');
  const [authToken, setAuthToken] = useState('');
  const [authSession, setAuthSession] = useState<AuthSessionPayload | null>(null);
  const [authProviders, setAuthProviders] = useState<AuthProvider[]>([]);
  const [authForm, setAuthForm] = useState<AuthFormState>(emptyAuthForm);
  const [authNotice, setAuthNotice] = useState<AuthNotice | null>(null);
  const [authLoading, setAuthLoading] = useState(true);
  const [authSubmitting, setAuthSubmitting] = useState(false);
  const [workspace, setWorkspace] = useState<Workspace | null>(null);
  const [activeMembership, setActiveMembership] = useState<WorkspaceMember | null>(null);
  const [workspaceMembers, setWorkspaceMembers] = useState<WorkspaceMember[]>([]);
  const [integrationTokens, setIntegrationTokens] = useState<IntegrationTokenSummary[]>([]);
  const [adminSummary, setAdminSummary] = useState<AdminSummary | null>(null);
  const [adminRescueWorkspaces, setAdminRescueWorkspaces] = useState<AdminRescueWorkspace[]>([]);
  const [birds, setBirds] = useState<Bird[]>([]);
  const [selectedBirdId, setSelectedBirdId] = useState<string>('');
  const [editingBirdId, setEditingBirdId] = useState<string>('');
  const [weights, setWeights] = useState<WeightRecord[]>([]);
  const [vetVisits, setVetVisits] = useState<VetVisit[]>([]);
  const [allBirdWeights, setAllBirdWeights] = useState<Record<string, WeightRecord[]>>({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [workspaceForm, setWorkspaceForm] = useState<WorkspaceFormState>(emptyWorkspaceForm);
  const [workspaceMemberForm, setWorkspaceMemberForm] = useState<WorkspaceMemberFormState>(emptyWorkspaceMemberForm);
  const [workspaceCreateForm, setWorkspaceCreateForm] = useState<WorkspaceCreateFormState>(emptyWorkspaceCreateForm);
  const [integrationTokenForm, setIntegrationTokenForm] = useState<IntegrationTokenFormState>(emptyIntegrationTokenForm);
  const [birdForm, setBirdForm] = useState<BirdFormState>(emptyBirdForm);
  const [birdPhotoName, setBirdPhotoName] = useState('');
  const [photoCrop, setPhotoCrop] = useState<PhotoCropState | null>(null);
  const [photoDrag, setPhotoDrag] = useState<PhotoDragState | null>(null);
  const [applyingPhotoCrop, setApplyingPhotoCrop] = useState(false);
  const [savingBird, setSavingBird] = useState(false);
  const [savingWorkspace, setSavingWorkspace] = useState(false);
  const [cancelingRescueRequest, setCancelingRescueRequest] = useState(false);
  const [savingWorkspaceMember, setSavingWorkspaceMember] = useState(false);
  const [creatingWorkspace, setCreatingWorkspace] = useState(false);
  const [creatingIntegrationToken, setCreatingIntegrationToken] = useState(false);
  const [revokingIntegrationTokenId, setRevokingIntegrationTokenId] = useState('');
  const [newIntegrationTokenSecret, setNewIntegrationTokenSecret] = useState('');
  const [updatingRescueWorkspaceId, setUpdatingRescueWorkspaceId] = useState<number | null>(null);
  const [switchingWorkspaceId, setSwitchingWorkspaceId] = useState<number | null>(null);
  const [showWeightAlertModal, setShowWeightAlertModal] = useState(false);
  const [speciesPickerOpen, setSpeciesPickerOpen] = useState(false);
  const [bulkWeightOpen, setBulkWeightOpen] = useState(false);
  const [savingBulkWeights, setSavingBulkWeights] = useState(false);
  const [bulkWeightDate, setBulkWeightDate] = useState(new Date().toISOString().slice(0, 10));
  const [bulkWeightRows, setBulkWeightRows] = useState<Record<string, BulkWeightRowState>>({});
  const [weightForm, setWeightForm] = useState({
    weightGrams: '',
    recordedOn: new Date().toISOString().slice(0, 10),
    notes: '',
  });
  const [vetVisitForm, setVetVisitForm] = useState({
    visitedOn: new Date().toISOString().slice(0, 10),
    clinicName: '',
    reason: '',
    notes: '',
  });
  const [mergeForm, setMergeForm] = useState({
    birdId: '',
    destinationOwnerEmail: '',
    notes: '',
  });
  const [deletingBird, setDeletingBird] = useState(false);
  const [editingVetVisitId, setEditingVetVisitId] = useState('');
  const [deletingVetVisitId, setDeletingVetVisitId] = useState('');
  const [removingWorkspaceMemberId, setRemovingWorkspaceMemberId] = useState('');
  const [expandedSettingsSection, setExpandedSettingsSection] = useState<SettingsSection | null>(null);

  const selectedBird = useMemo(
    () => birds.find((bird) => bird.id === selectedBirdId) ?? null,
    [birds, selectedBirdId],
  );
  const editingBird = useMemo(
    () => birds.find((bird) => bird.id === editingBirdId) ?? null,
    [birds, editingBirdId],
  );

  const birdsWithRecentWeights = useMemo(
    () => birds.filter((bird) => (allBirdWeights[bird.id] ?? []).length > 0),
    [allBirdWeights, birds],
  );

  const showFlockDetailColumn = bulkWeightOpen || Boolean(selectedBird);

  const missingFirstWeightCount = useMemo(
    () => birds.filter((bird) => bird.latestWeightGrams === null).length,
    [birds],
  );

  const birdWeightAssessments = useMemo(
    () =>
      Object.fromEntries(
        birds.map((bird) => [
          bird.id,
          assessBirdWeight(bird),
        ]),
      ) as Record<string, BirdWeightAssessment>,
    [birds],
  );

  const selectedBirdTrendCopy = useMemo(() => {
    if (weights.length < 2) {
      return 'Needs a few more entries before trend detection.';
    }

    const first = weights[0].weightGrams;
    const last = weights[weights.length - 1].weightGrams;
    const delta = last - first;

    if (Math.abs(delta) < 1) {
      return 'Weight has been steady over the last visible entries.';
    }

    return delta > 0
      ? `Weight is up ${delta.toFixed(1)} g over the current window.`
      : `Weight is down ${Math.abs(delta).toFixed(1)} g over the current window.`;
  }, [weights]);

  const outOfRangeBirds = useMemo(
    () =>
      birds
        .map((bird) => {
          const assessment = birdWeightAssessments[bird.id];

          if (!assessment || (assessment.status !== 'below' && assessment.status !== 'above')) {
            return null;
          }

          return {
            bird,
            assessment: assessment as OutOfRangeBirdWeightAssessment,
          };
        })
        .filter((item): item is { bird: Bird; assessment: OutOfRangeBirdWeightAssessment } => item !== null),
    [birdWeightAssessments, birds],
  );

  const filteredSpeciesOptions = useMemo(() => {
    const query = birdForm.species.trim().toLowerCase();

    if (!query) {
      return parrotSpeciesOptions.slice(0, 12);
    }

    return parrotSpeciesOptions
      .filter((speciesOption) => speciesOption.toLowerCase().includes(query))
      .slice(0, 12);
  }, [birdForm.species]);

  const selectedBirdChart = useMemo(() => {
    if (!weights.length) {
      return {
        points: [] as { id: string; x: number; y: number; label: string }[],
        path: '',
        isFlat: false,
        yTicks: [] as { label: string; y: number }[],
        xTicks: [] as { label: string; x: number }[],
      };
    }

    const rawMinWeight = Math.min(...weights.map((entry) => entry.weightGrams));
    const rawMaxWeight = Math.max(...weights.map((entry) => entry.weightGrams));
    const isFlat = Math.abs(rawMaxWeight - rawMinWeight) < 0.01;
    const padding = Math.max((rawMaxWeight - rawMinWeight) * 0.12, 2);
    const minWeight = Math.max(0, rawMinWeight - padding);
    const maxWeight = rawMaxWeight + padding;
    const innerWidth = MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.left - MEMBER_CHART_PADDING.right;
    const innerHeight = MEMBER_CHART_HEIGHT - MEMBER_CHART_PADDING.top - MEMBER_CHART_PADDING.bottom;
    const startDate = parseDateValue(weights[0].recordedOn);
    const endDate = parseDateValue(weights[weights.length - 1].recordedOn);
    const startMs = startDate.getTime();
    const endMs = endDate.getTime();
    const dateSpread = Math.max(endMs - startMs, 24 * 60 * 60 * 1000);
    const weightSpread = Math.max(maxWeight - minWeight, 1);

    const points = weights.map((entry) => {
      const pointTime = parseDateValue(entry.recordedOn).getTime();
      const x = MEMBER_CHART_PADDING.left + ((pointTime - startMs) / dateSpread) * innerWidth;
      const y = MEMBER_CHART_PADDING.top + (1 - (entry.weightGrams - minWeight) / weightSpread) * innerHeight;

      return {
        id: entry.id,
        x,
        y,
        label: `${entry.weightGrams.toFixed(1)} g on ${formatShortDate(entry.recordedOn)}`,
      };
    });

    const path = toOverviewPath(points);
    const midWeight = minWeight + (maxWeight - minWeight) / 2;
    const midDate = new Date((startMs + endMs) / 2);

    return {
      points,
      path,
      isFlat,
      yTicks: [
        { label: `${maxWeight.toFixed(0)} g`, y: MEMBER_CHART_PADDING.top },
        { label: `${midWeight.toFixed(0)} g`, y: MEMBER_CHART_PADDING.top + innerHeight / 2 },
        { label: `${minWeight.toFixed(0)} g`, y: MEMBER_CHART_HEIGHT - MEMBER_CHART_PADDING.bottom },
      ],
      xTicks: [
        { label: formatShortDate(weights[0].recordedOn), x: MEMBER_CHART_PADDING.left },
        { label: formatShortDate(midDate.toISOString().slice(0, 10)), x: MEMBER_CHART_WIDTH / 2 },
        { label: formatShortDate(weights[weights.length - 1].recordedOn), x: MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right },
      ],
    };
  }, [weights]);

  const hasSelectedBirdLine = selectedBirdChart.points.length >= 2 && selectedBirdChart.path.length > 0;

  const flockWeeklyTrendItems = useMemo(() => {
    return birds
      .map((bird) => {
        const birdWeights = allBirdWeights[bird.id] ?? [];

        if (!birdWeights.length) {
          return null;
        }

        const latestWeight = birdWeights[birdWeights.length - 1];
        const weekStart = new Date(`${latestWeight.recordedOn}T00:00:00`);
        weekStart.setDate(weekStart.getDate() - 7);

        const weeklyWeights = birdWeights.filter(
          (entry) => new Date(`${entry.recordedOn}T00:00:00`) >= weekStart,
        );

        if (weeklyWeights.length < 2) {
          return null;
        }

        const startingWeight = weeklyWeights[0].weightGrams;
        const percentChange = startingWeight === 0 ? 0 : ((latestWeight.weightGrams - startingWeight) / startingWeight) * 100;

        return {
          id: bird.id,
          name: bird.name,
          chartColor: bird.chartColor,
          formattedChange: `${percentChange >= 0 ? '+' : ''}${percentChange.toFixed(1)}%`,
          direction: percentChange >= 0 ? 'positive' : 'negative',
        } as const;
      })
      .filter((trend): trend is NonNullable<typeof trend> => trend !== null);
  }, [allBirdWeights, birds]);

  const overviewChart = useMemo(() => {
    const plottedBirds = birds
      .map((bird) => ({ bird, weights: allBirdWeights[bird.id] ?? [] }))
      .filter((entry) => entry.weights.length > 0);

    const endDate = new Date();
    endDate.setHours(0, 0, 0, 0);
    const startDate = new Date(endDate);
    startDate.setDate(startDate.getDate() - 29);

    if (!plottedBirds.length) {
      return {
        plottedBirds,
        series: [],
        xTicks: [
          { label: formatShortDate(startDate.toISOString().slice(0, 10)), x: OVERVIEW_PADDING.left },
          { label: formatShortDate(endDate.toISOString().slice(0, 10)), x: OVERVIEW_WIDTH - OVERVIEW_PADDING.right },
        ],
        yTicks: [],
      };
    }

    const allWeights = plottedBirds.flatMap((entry) => entry.weights.map((weight) => weight.weightGrams));
    const rawMinWeight = Math.min(...allWeights);
    const rawMaxWeight = Math.max(...allWeights);
    const weightPadding = Math.max((rawMaxWeight - rawMinWeight) * 0.12, 2);
    const minWeight = Math.max(0, rawMinWeight - weightPadding);
    const maxWeight = rawMaxWeight + weightPadding;
    const midWeight = minWeight + (maxWeight - minWeight) / 2;

    return {
      plottedBirds,
      series: plottedBirds.map(({ bird, weights: birdWeights }) => ({
        bird,
        points: buildOverviewSeries(birdWeights, minWeight, maxWeight, startDate, endDate),
      })),
      xTicks: [
        { label: formatShortDate(startDate.toISOString().slice(0, 10)), x: OVERVIEW_PADDING.left },
        { label: formatShortDate(new Date((startDate.getTime() + endDate.getTime()) / 2).toISOString().slice(0, 10)), x: OVERVIEW_WIDTH / 2 },
        { label: formatShortDate(endDate.toISOString().slice(0, 10)), x: OVERVIEW_WIDTH - OVERVIEW_PADDING.right },
      ],
      yTicks: [
        { label: `${maxWeight.toFixed(0)} g`, y: OVERVIEW_PADDING.top },
        { label: `${midWeight.toFixed(0)} g`, y: OVERVIEW_PADDING.top + (OVERVIEW_HEIGHT - OVERVIEW_PADDING.top - OVERVIEW_PADDING.bottom) / 2 },
        { label: `${minWeight.toFixed(0)} g`, y: OVERVIEW_HEIGHT - OVERVIEW_PADDING.bottom },
      ],
    };
  }, [allBirdWeights, birds]);

  const applySession = (session: AuthSessionPayload, token: string) => {
    setAuthToken(token);
    setAuthSession(session);
    setAuthProviders(session.providers);
    setAuthNotice(null);
    setNewIntegrationTokenSecret('');
    setWorkspace(session.activeWorkspace);
    setActiveMembership({
      ...session.activeMembership,
      email: session.activeMembership.inviteEmail,
    });
    setWorkspaceForm({
      name: session.activeWorkspace.name,
      workspaceType: session.activeWorkspace.workspaceType,
      billingEmail: session.activeWorkspace.billingEmail ?? '',
      billingPlan: isHouseholdPlan(session.activeWorkspace.billingPlan) ? session.activeWorkspace.billingPlan : 'household_basic',
    });
    setWorkspaceCreateForm((current) => ({
      ...current,
      billingEmail: current.billingEmail || session.user.email,
    }));
  };

  const clearAppSession = () => {
    clearSessionToken();
    setAuthToken('');
    setAuthSession(null);
    setWorkspace(null);
    setActiveMembership(null);
    setWorkspaceMembers([]);
    setIntegrationTokens([]);
    setAdminSummary(null);
    setAdminRescueWorkspaces([]);
    setBirds([]);
    setWeights([]);
    setVetVisits([]);
    setAllBirdWeights({});
    setSelectedBirdId('');
    setEditingBirdId('');
    setWorkspaceForm(emptyWorkspaceForm);
    setWorkspaceCreateForm(emptyWorkspaceCreateForm);
    setIntegrationTokenForm(emptyIntegrationTokenForm);
    setNewIntegrationTokenSecret('');
    setAuthNotice(null);
  };

  useEffect(() => {
    const loadProviders = async () => {
      try {
        const response = await apiFetch('/auth/providers');

        if (!response.ok) {
          setAuthProviders(defaultAuthProviders);
          return;
        }

        const data = (await readJsonSafely<{ providers?: AuthProvider[] }>(response)) ?? {};
        const mergedProviders = defaultAuthProviders.map((defaultProvider) => {
          const matchingProvider = (data.providers ?? []).find((provider) => provider.providerKey === defaultProvider.providerKey);
          return matchingProvider ?? defaultProvider;
        });
        setAuthProviders(mergedProviders);
      } catch {
        setAuthProviders(defaultAuthProviders);
      }
    };

    const bootstrapSession = async () => {
      try {
        setAuthLoading(true);
        await loadProviders();

        const url = new URL(window.location.href);
        const callbackToken = url.searchParams.get('auth_token') ?? '';
        const token = callbackToken || readStoredSessionToken();

        if (callbackToken) {
          persistSessionToken(callbackToken);
          url.searchParams.delete('auth_token');
          window.history.replaceState({}, document.title, `${url.pathname}${url.search}${url.hash}`);
        }

        if (!token) {
          return;
        }

        const response = await apiFetch('/auth/session', token);

        if (!response.ok) {
          clearAppSession();
          return;
        }

        const data = (await readJsonSafely<{ token?: string; session?: AuthSessionPayload }>(response)) ?? {};

        if (data.session && (data.token || token)) {
          persistSessionToken(data.token || token);
          applySession(data.session, data.token || token);
          setError('');
        }
      } catch (loadError) {
        setError(loadError instanceof Error ? loadError.message : 'Unable to load your session.');
      } finally {
        setAuthLoading(false);
      }
    };

    void bootstrapSession();
  }, []);

  useEffect(() => {
    if (!authToken || !workspace?.id) {
      setLoading(false);
      return;
    }

    const loadWorkspaceData = async () => {
      try {
        setLoading(true);
        const [birdsResponse, membersResponse, integrationTokensResponse] = await Promise.all([
          apiFetch('/birds', authToken),
          apiFetch('/workspace/members', authToken),
          apiFetch('/integration-tokens', authToken),
        ]);

        if (!birdsResponse.ok) {
          if (birdsResponse.status === 401) {
            clearAppSession();
            return;
          }

          throw new Error(await readErrorMessage(birdsResponse, 'Unable to load flock members.'));
        }

        const data = (await readJsonSafely<{ birds?: Bird[] }>(birdsResponse)) ?? {};
        const nextBirds = data.birds ?? [];

        setBirds(nextBirds);
        setSelectedBirdId((current) => (current && nextBirds.some((bird) => bird.id === current) ? current : ''));

        if (membersResponse.ok) {
          const membersData = (await readJsonSafely<{ members?: WorkspaceMember[] }>(membersResponse)) ?? {};
          setWorkspaceMembers(
            (membersData.members ?? []).map((member) => ({
              ...member,
              email: member.inviteEmail,
            })),
          );
        } else {
          setWorkspaceMembers([]);
        }

        if (integrationTokensResponse.ok) {
          const integrationTokensData =
            (await readJsonSafely<{ integrationTokens?: IntegrationTokenSummary[] }>(integrationTokensResponse)) ?? {};
          setIntegrationTokens(integrationTokensData.integrationTokens ?? []);
        } else {
          setIntegrationTokens([]);
        }
      } catch (loadError) {
        setError(loadError instanceof Error ? loadError.message : 'Unable to load flock members.');
      } finally {
        setLoading(false);
      }
    };

    void loadWorkspaceData();
  }, [authToken, workspace?.id]);

  useEffect(() => {
    if (!authToken || !authSession?.isAdmin || activePage !== 'admin') {
      return;
    }

    const loadAdminDashboard = async () => {
      try {
        const [summaryResponse, rescuesResponse] = await Promise.all([
          apiFetch('/admin/summary', authToken),
          apiFetch('/admin/rescue-workspaces', authToken),
        ]);

        if (!summaryResponse.ok || !rescuesResponse.ok) {
          throw new Error('Unable to load admin dashboard.');
        }

        const summaryData = (await readJsonSafely<{ summary?: AdminSummary }>(summaryResponse)) ?? {};
        const rescuesData = (await readJsonSafely<{ rescueWorkspaces?: AdminRescueWorkspace[] }>(rescuesResponse)) ?? {};

        setAdminSummary(summaryData.summary ?? null);
        setAdminRescueWorkspaces(rescuesData.rescueWorkspaces ?? []);
      } catch (adminError) {
        setError(adminError instanceof Error ? adminError.message : 'Unable to load admin dashboard.');
      }
    };

    void loadAdminDashboard();
  }, [activePage, authSession?.isAdmin, authToken]);

  useEffect(() => {
    if (!selectedBird?.id) {
      setWeights([]);
      setVetVisits([]);
      return;
    }

    const loadBirdDetail = async () => {
      try {
        const [weightsResponse, visitsResponse] = await Promise.all([
          apiFetch(`/birds/${selectedBird.id}/weights?days=90`, authToken),
          apiFetch(`/birds/${selectedBird.id}/vet-visits`, authToken),
        ]);

        if (!weightsResponse.ok || !visitsResponse.ok) {
          throw new Error('Unable to load flock member details.');
        }

        const weightsData = (await readJsonSafely<{ weights?: WeightRecord[] }>(weightsResponse)) ?? {};
        const visitsData = (await readJsonSafely<{ vetVisits?: VetVisit[] }>(visitsResponse)) ?? {};

        setWeights(weightsData.weights ?? []);
        setVetVisits(visitsData.vetVisits ?? []);
        setEditingVetVisitId('');
        setDeletingVetVisitId('');
      } catch (loadError) {
        setError(loadError instanceof Error ? loadError.message : 'Unable to load flock member details.');
      }
    };

    void loadBirdDetail();
  }, [authToken, selectedBird?.id]);

  useEffect(() => {
    if (!authToken || !birds.length) {
      setAllBirdWeights({});
      return;
    }

    const loadAllBirdWeights = async () => {
      try {
        const responses = await Promise.all(
          birds.map(async (bird) => {
            const response = await apiFetch(`/birds/${bird.id}/weights?days=30`, authToken);

            if (!response.ok) {
              throw new Error(await readErrorMessage(response, 'Unable to load overview weights.'));
            }

            const data = (await readJsonSafely<{ weights?: WeightRecord[] }>(response)) ?? {};
            return [bird.id, (data.weights ?? []) as WeightRecord[]] as const;
          }),
        );

        setAllBirdWeights(Object.fromEntries(responses));
      } catch (loadError) {
        setError(loadError instanceof Error ? loadError.message : 'Unable to load overview weights.');
      }
    };

    void loadAllBirdWeights();
  }, [authToken, birds]);

  useEffect(() => {
    if (!editingBirdId) {
      return;
    }

    if (!editingBird) {
      setEditingBirdId('');
      setBirdForm(emptyBirdForm);
      setBirdPhotoName('');
      setPhotoCrop(null);
      setPhotoDrag(null);
      return;
    }

    setBirdForm(toBirdForm(editingBird));
    setBirdPhotoName('');
    setPhotoCrop(null);
    setPhotoDrag(null);
  }, [editingBird, editingBirdId]);

  useEffect(() => {
    setBulkWeightRows((current) => {
      const nextEntries = birds.map((bird) => [bird.id, current[bird.id] ?? { weightGrams: '' }] as const);
      return Object.fromEntries(nextEntries);
    });
  }, [birds]);

  const startCreateBird = () => {
    setEditingBirdId('');
    setBirdForm(emptyBirdForm);
    setBirdPhotoName('');
    setPhotoCrop(null);
    setPhotoDrag(null);
    setError('');
    setActivePage('settings');
  };

  const handleAuthSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError('');
    setAuthNotice(null);
    setAuthSubmitting(true);

    try {
      const response = await apiFetch('/auth/magic-link/request', undefined, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: authForm.name.trim(),
          email: authForm.email,
          redirectTo: window.location.href,
        }),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to send your sign-in link.'));
      }

      const data = (await readJsonSafely<{ message?: string; previewUrl?: string | null }>(response)) ?? {};
      setAuthNotice({
        message: data.message ?? 'Check your email for a secure sign-in link.',
        previewUrl: data.previewUrl,
      });
      setAuthForm(emptyAuthForm);
    } catch (authError) {
      setError(authError instanceof Error ? authError.message : 'Unable to send your sign-in link.');
    } finally {
      setAuthSubmitting(false);
    }
  };

  const handleLogout = async () => {
    setError('');

    try {
      if (authToken) {
        await apiFetch('/auth/logout', authToken, { method: 'POST' });
      }
    } catch {
      // Best-effort logout.
    } finally {
      clearAppSession();
      setAuthForm(emptyAuthForm);
    }
  };

  const handleWorkspaceSwitch = async (workspaceId: number) => {
    if (!authToken || workspaceId === workspace?.id) {
      return;
    }

    setError('');
    setSwitchingWorkspaceId(workspaceId);

    try {
      const response = await apiFetch('/auth/switch-workspace', authToken, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ workspaceId }),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to switch flocks.'));
      }

      const data = (await readJsonSafely<{ token?: string; session?: AuthSessionPayload }>(response)) ?? {};

      if (!data.session) {
        throw new Error('Unable to switch flocks.');
      }

      const nextToken = data.token || authToken;
      persistSessionToken(nextToken);
      applySession(data.session, nextToken);
      setSelectedBirdId('');
      setEditingBirdId('');
      setWeights([]);
      setVetVisits([]);
      setActivePage('overview');
    } catch (switchError) {
      setError(switchError instanceof Error ? switchError.message : 'Unable to switch flocks.');
    } finally {
      setSwitchingWorkspaceId(null);
    }
  };

  const handleCreateIntegrationToken = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!authToken) {
      return;
    }

    setError('');
    setCreatingIntegrationToken(true);

    try {
      const response = await apiFetch('/integration-tokens', authToken, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: integrationTokenForm.name.trim(),
          scope: integrationTokenForm.scope,
          expiresInDays: integrationTokenForm.expiresInDays ? Number(integrationTokenForm.expiresInDays) : undefined,
        }),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to create integration token.'));
      }

      const data =
        (await readJsonSafely<{ integrationToken?: IntegrationTokenSummary; token?: string }>(response)) ?? {};

      if (!data.integrationToken || !data.token) {
        throw new Error('Unable to create integration token.');
      }

      setIntegrationTokens((current) => [data.integrationToken!, ...current]);
      setIntegrationTokenForm(emptyIntegrationTokenForm);
      setNewIntegrationTokenSecret(data.token);
      setExpandedSettingsSection('integration-tokens');
    } catch (integrationTokenError) {
      setError(integrationTokenError instanceof Error ? integrationTokenError.message : 'Unable to create integration token.');
    } finally {
      setCreatingIntegrationToken(false);
    }
  };

  const handleRevokeIntegrationToken = async (tokenId: string) => {
    if (!authToken) {
      return;
    }

    setError('');
    setRevokingIntegrationTokenId(tokenId);

    try {
      const response = await apiFetch(`/integration-tokens/${tokenId}`, authToken, {
        method: 'DELETE',
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to revoke integration token.'));
      }

      setIntegrationTokens((current) => current.filter((token) => token.id !== tokenId));
    } catch (integrationTokenError) {
      setError(integrationTokenError instanceof Error ? integrationTokenError.message : 'Unable to revoke integration token.');
    } finally {
      setRevokingIntegrationTokenId('');
    }
  };

  const handleRescueVerificationStatusChange = async (workspaceId: number, rescueVerificationStatus: RescueVerificationStatus) => {
    if (!authToken) {
      return;
    }

    setError('');
    setUpdatingRescueWorkspaceId(workspaceId);

    try {
      const response = await apiFetch(`/admin/rescue-workspaces/${workspaceId}`, authToken, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ rescueVerificationStatus }),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to update rescue verification status.'));
      }

      const data = (await readJsonSafely<{ workspace?: Workspace }>(response)) ?? {};

      if (!data.workspace) {
        throw new Error('Unable to update rescue verification status.');
      }

      const nextRescueWorkspaces = adminRescueWorkspaces
        .map((entry) => (entry.workspace.id === workspaceId ? { ...entry, workspace: data.workspace! } : entry))
        .filter((entry) => entry.workspace.workspaceType === 'rescue');

      setAdminRescueWorkspaces(nextRescueWorkspaces);
      setAdminSummary((current) =>
        current
          ? {
              ...current,
              rescueWorkspaces: nextRescueWorkspaces.length,
              pendingRescues: nextRescueWorkspaces.filter((entry) => entry.workspace.rescueVerificationStatus === 'pending').length,
            }
          : current,
      );
    } catch (adminError) {
      setError(adminError instanceof Error ? adminError.message : 'Unable to update rescue verification status.');
    } finally {
      setUpdatingRescueWorkspaceId(null);
    }
  };

  const handleCreateWorkspace = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!authToken) {
      return;
    }

    setError('');
    setCreatingWorkspace(true);

    try {
      const response = await apiFetch('/workspaces', authToken, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: workspaceCreateForm.name,
          workspaceType: workspaceCreateForm.workspaceType,
          billingEmail: workspaceCreateForm.billingEmail,
          billingPlan: workspaceCreateForm.workspaceType === 'rescue' ? undefined : workspaceCreateForm.billingPlan,
        }),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to create flock.'));
      }

      const workspaceResponse = await apiFetch('/auth/session', authToken);
      if (!workspaceResponse.ok) {
        throw new Error(await readErrorMessage(workspaceResponse, 'Flock was created but the session could not be refreshed.'));
      }

      const data = (await readJsonSafely<{ token?: string; session?: AuthSessionPayload }>(workspaceResponse)) ?? {};
      if (!data.session) {
        throw new Error('Unable to refresh your flock list.');
      }

      const nextToken = data.token || authToken;
      persistSessionToken(nextToken);
      applySession(data.session, nextToken);
      setWorkspaceCreateForm({
        ...emptyWorkspaceCreateForm,
        billingEmail: data.session.user.email,
      });
    } catch (workspaceError) {
      setError(workspaceError instanceof Error ? workspaceError.message : 'Unable to create flock.');
    } finally {
      setCreatingWorkspace(false);
    }
  };

  const startEditBird = (bird: Bird) => {
    setSelectedBirdId(bird.id);
    setEditingBirdId(bird.id);
    setBirdForm(toBirdForm(bird));
    setBirdPhotoName('');
    setPhotoCrop(null);
    setPhotoDrag(null);
    setError('');
    setActivePage('settings');
  };

  const handleBirdPhotoChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];

    if (!file) {
      return;
    }

    if (file.size > 12_000_000) {
      setError('Photo is too large to process in the browser. Please choose one under 12 MB.');
      event.target.value = '';
      return;
    }

    try {
      const photoDataUrl = await readFileAsDataUrl(file);
      const image = await loadImageElement(photoDataUrl);

      setPhotoCrop({
        sourceDataUrl: photoDataUrl,
        fileName: file.name,
        naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        zoom: 1,
        offsetX: 0,
        offsetY: 0,
      });
      setPhotoDrag(null);
      setBirdPhotoName(file.name);
      setError('');
    } catch (photoError) {
      setError(photoError instanceof Error ? photoError.message : 'Unable to read that photo.');
    } finally {
      event.target.value = '';
    }
  };

  const handleApplyPhotoCrop = async () => {
    if (!photoCrop) {
      return;
    }

    setApplyingPhotoCrop(true);
    setError('');

    try {
      const photoDataUrl = await exportCroppedPhoto(photoCrop);
      setBirdForm((current) => ({ ...current, photoDataUrl }));
      setBirdPhotoName(photoCrop.fileName);
      setPhotoCrop(null);
      setPhotoDrag(null);
    } catch (cropError) {
      setError(cropError instanceof Error ? cropError.message : 'Unable to crop that photo.');
    } finally {
      setApplyingPhotoCrop(false);
    }
  };

  const handleCancelPhotoCrop = () => {
    setPhotoCrop(null);
    setPhotoDrag(null);
    setError('');
  };

  const handleRemovePhoto = () => {
    setBirdForm((current) => ({ ...current, photoDataUrl: '' }));
    setBirdPhotoName('');
    setPhotoCrop(null);
    setPhotoDrag(null);
  };

  const handlePhotoCropPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
    if (!photoCrop) {
      return;
    }

    event.currentTarget.setPointerCapture(event.pointerId);
    setPhotoDrag({
      pointerId: event.pointerId,
      startX: event.clientX,
      startY: event.clientY,
      startOffsetX: photoCrop.offsetX,
      startOffsetY: photoCrop.offsetY,
    });
  };

  const handlePhotoCropPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
    if (!photoCrop || !photoDrag || photoDrag.pointerId !== event.pointerId) {
      return;
    }

    const metrics = getPhotoCropMetrics(photoCrop);
    const deltaX = event.clientX - photoDrag.startX;
    const deltaY = event.clientY - photoDrag.startY;
    const nextOffsetX =
      metrics.maxOffsetX > 0 ? clamp(photoDrag.startOffsetX - (deltaX / (metrics.maxOffsetX * metrics.scale)) * 100, -100, 100) : 0;
    const nextOffsetY =
      metrics.maxOffsetY > 0 ? clamp(photoDrag.startOffsetY - (deltaY / (metrics.maxOffsetY * metrics.scale)) * 100, -100, 100) : 0;

    setPhotoCrop((current) => (current ? { ...current, offsetX: nextOffsetX, offsetY: nextOffsetY } : current));
  };

  const handlePhotoCropPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
    if (photoDrag?.pointerId === event.pointerId) {
      event.currentTarget.releasePointerCapture(event.pointerId);
      setPhotoDrag(null);
    }
  };

  const handleBirdSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError('');
    setSavingBird(true);

    const isEditing = Boolean(editingBirdId);
    const method = isEditing ? 'PUT' : 'POST';

    try {
      const response = await apiFetch(isEditing ? `/birds/${editingBirdId}` : '/birds', authToken, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(birdForm),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, `Unable to ${isEditing ? 'update' : 'create'} flock member.`));
      }

      const data = await readJsonSafely<{ bird: Bird }>(response);
      if (!data?.bird) {
        throw new Error(`Unable to ${isEditing ? 'update' : 'create'} flock member.`);
      }
      const savedBird = data.bird as Bird;

      setBirds((current) => {
        if (isEditing) {
          return sortBirdsByName(current.map((bird) => (bird.id === savedBird.id ? savedBird : bird)));
        }

        return sortBirdsByName([...current, savedBird]);
      });
      setSelectedBirdId(isEditing ? savedBird.id : '');
      setEditingBirdId(savedBird.id);
      setBirdForm(toBirdForm(savedBird));
      setBirdPhotoName('');
      setActivePage(isEditing ? 'settings' : 'flock');
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Unable to save flock member.');
    } finally {
      setSavingBird(false);
    }
  };

  const handleWeightSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!selectedBird) {
      return;
    }

    setError('');

    try {
      const response = await apiFetch(`/birds/${selectedBird.id}/weights`, authToken, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          weightGrams: Number(weightForm.weightGrams),
          recordedOn: weightForm.recordedOn,
          notes: weightForm.notes,
        }),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to save weight.'));
      }

      const data = await readJsonSafely<{ weight: WeightRecord }>(response);
      if (!data?.weight) {
        throw new Error('Unable to save weight.');
      }
      const nextWeights = [...weights, data.weight].sort((left, right) => left.recordedOn.localeCompare(right.recordedOn));

      setWeights(nextWeights);
      setAllBirdWeights((current) => ({
        ...current,
        [selectedBird.id]: nextWeights.filter((entry) => {
          const limitDate = new Date();
          limitDate.setDate(limitDate.getDate() - 29);
          return new Date(`${entry.recordedOn}T00:00:00`) >= new Date(limitDate.toDateString());
        }),
      }));
      setBirds((current) =>
        current.map((bird) =>
          bird.id === selectedBird.id
            ? {
                ...bird,
                latestWeightGrams: data.weight.weightGrams,
                latestRecordedOn: data.weight.recordedOn,
              }
            : bird,
        ),
      );
      setWeightForm({ weightGrams: '', recordedOn: new Date().toISOString().slice(0, 10), notes: '' });
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Unable to save weight.');
    }
  };

  const handleBulkWeightValueChange = (birdId: string, weightGrams: string) => {
    setBulkWeightRows((current) => ({
      ...current,
      [birdId]: {
        weightGrams,
      },
    }));
  };

  const handleBulkWeightSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const entries = birds
      .map((bird) => ({
        bird,
        weightGrams: bulkWeightRows[bird.id]?.weightGrams?.trim() ?? '',
      }))
      .filter((entry) => entry.weightGrams);

    if (!entries.length) {
      setError('Add at least one weight before saving the bulk update.');
      return;
    }

    setError('');
    setSavingBulkWeights(true);

    try {
      const savedWeights: Record<string, WeightRecord> = {};

      for (const entry of entries) {
        const response = await apiFetch(`/birds/${entry.bird.id}/weights`, authToken, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            weightGrams: Number(entry.weightGrams),
            recordedOn: bulkWeightDate,
            notes: '',
          }),
        });

        if (!response.ok) {
          throw new Error(await readErrorMessage(response, `Unable to save weight for ${entry.bird.name}.`));
        }

        const data = await readJsonSafely<{ weight?: WeightRecord }>(response);

        if (!data?.weight) {
          throw new Error(`Unable to save weight for ${entry.bird.name}.`);
        }

        savedWeights[entry.bird.id] = data.weight;
      }

      setBirds((current) =>
        current.map((bird) => {
          const savedWeight = savedWeights[bird.id];

          if (!savedWeight) {
            return bird;
          }

          return {
            ...bird,
            latestWeightGrams: savedWeight.weightGrams,
            latestRecordedOn: savedWeight.recordedOn,
          };
        }),
      );

      setAllBirdWeights((current) => {
        const next = { ...current };
        const limitDate = new Date();
        limitDate.setDate(limitDate.getDate() - 29);
        const limitMs = new Date(limitDate.toDateString()).getTime();

        for (const [birdId, savedWeight] of Object.entries(savedWeights)) {
          const nextWeights = [...(current[birdId] ?? []), savedWeight]
            .sort((left, right) => left.recordedOn.localeCompare(right.recordedOn))
            .filter((entry) => new Date(`${entry.recordedOn}T00:00:00`).getTime() >= limitMs);
          next[birdId] = nextWeights;
        }

        return next;
      });

      if (selectedBird?.id && savedWeights[selectedBird.id]) {
        setWeights((current) =>
          [...current.filter((entry) => entry.recordedOn !== bulkWeightDate), savedWeights[selectedBird.id]].sort((left, right) =>
            left.recordedOn.localeCompare(right.recordedOn),
          ),
        );
      }

      setBulkWeightRows((current) =>
        Object.fromEntries(
          Object.entries(current).map(([birdId]) => [birdId, { weightGrams: '' }]),
        ),
      );
    } catch (bulkError) {
      setError(bulkError instanceof Error ? bulkError.message : 'Unable to save the bulk weight update.');
    } finally {
      setSavingBulkWeights(false);
    }
  };

  const handleVetVisitSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!selectedBird) {
      return;
    }

    setError('');

    try {
      const isEditingVetVisit = Boolean(editingVetVisitId);
      const response = await apiFetch(
        isEditingVetVisit ? `/birds/${selectedBird.id}/vet-visits/${editingVetVisitId}` : `/birds/${selectedBird.id}/vet-visits`,
        authToken,
        {
          method: isEditingVetVisit ? 'PUT' : 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(vetVisitForm),
        },
      );

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, `Unable to ${isEditingVetVisit ? 'update' : 'save'} vet visit.`));
      }

      const data = await readJsonSafely<{ vetVisit: VetVisit }>(response);
      if (!data?.vetVisit) {
        throw new Error(`Unable to ${isEditingVetVisit ? 'update' : 'save'} vet visit.`);
      }
      setVetVisits((current) =>
        (isEditingVetVisit ? current.map((visit) => (visit.id === data.vetVisit.id ? data.vetVisit : visit)) : [data.vetVisit, ...current]).sort(
          (left, right) => right.visitedOn.localeCompare(left.visitedOn),
        ),
      );
      setVetVisitForm({
        visitedOn: new Date().toISOString().slice(0, 10),
        clinicName: '',
        reason: '',
        notes: '',
      });
      setEditingVetVisitId('');
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Unable to save vet visit.');
    }
  };

  const handleEditVetVisit = (visit: VetVisit) => {
    setEditingVetVisitId(visit.id);
    setVetVisitForm({
      visitedOn: visit.visitedOn,
      clinicName: visit.clinicName,
      reason: visit.reason,
      notes: visit.notes ?? '',
    });
    setError('');
  };

  const handleCancelVetVisitEdit = () => {
    setEditingVetVisitId('');
    setVetVisitForm({
      visitedOn: new Date().toISOString().slice(0, 10),
      clinicName: '',
      reason: '',
      notes: '',
    });
  };

  const handleDeleteVetVisit = async (visitId: string) => {
    if (!selectedBird || deletingVetVisitId) {
      return;
    }

    setDeletingVetVisitId(visitId);
    setError('');

    try {
      const response = await apiFetch(`/birds/${selectedBird.id}/vet-visits/${visitId}`, authToken, {
        method: 'DELETE',
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to remove vet visit.'));
      }

      setVetVisits((current) => current.filter((visit) => visit.id !== visitId));
      if (editingVetVisitId === visitId) {
        handleCancelVetVisitEdit();
      }
    } catch (removeError) {
      setError(removeError instanceof Error ? removeError.message : 'Unable to remove vet visit.');
    } finally {
      setDeletingVetVisitId('');
    }
  };

  const handleRemoveBird = async () => {
    if (!selectedBird || deletingBird) {
      return;
    }

    const confirmed = window.confirm(
      `Remove ${selectedBird.name} from the flock?\n\nThis will also remove weight records and vet visits for this flock member.`,
    );

    if (!confirmed) {
      return;
    }

    setDeletingBird(true);
    setError('');

    try {
      const response = await apiFetch(`/birds/${selectedBird.id}`, authToken, {
        method: 'DELETE',
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to remove flock member.'));
      }

      const nextBirds = birds.filter((bird) => bird.id !== selectedBird.id);
      setBirds(nextBirds);
      setAllBirdWeights((current) => {
        const next = { ...current };
        delete next[selectedBird.id];
        return next;
      });
      setSelectedBirdId('');
      setWeights([]);
      setVetVisits([]);
      setEditingVetVisitId('');
      setDeletingVetVisitId('');

      if (editingBirdId === selectedBird.id) {
        setEditingBirdId('');
        setBirdForm(emptyBirdForm);
        setBirdPhotoName('');
      }
    } catch (removeError) {
      setError(removeError instanceof Error ? removeError.message : 'Unable to remove flock member.');
    } finally {
      setDeletingBird(false);
    }
  };

  const handleMergeSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError('');

    try {
      const response = await apiFetch('/transfers/draft', authToken, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(mergeForm),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to save transfer draft.'));
      }

      const data =
        (await readJsonSafely<{
          bird?: Bird;
          destinationOwnerExists?: boolean;
          inviteSent?: boolean;
        }>(response)) ?? {};

      const transferBirdName = data.bird?.name || birds.find((bird) => bird.id === mergeForm.birdId)?.name || 'bird';
      const inviteCopy = data.inviteSent
        ? `\n\nA FlockPal invite was also sent to ${mergeForm.destinationOwnerEmail} because that email does not have an account yet.`
        : data.destinationOwnerExists
          ? `\n\n${mergeForm.destinationOwnerEmail} already has a FlockPal account, so no invite was needed.`
          : '';

      window.alert(
        `Transfer prep saved for ${transferBirdName}.${inviteCopy}\n\nThis is currently a planning workflow only. Later this page can turn into a real account-to-account transfer flow using verified bird identity and ownership checks.`,
      );

      setMergeForm({
        birdId: '',
        destinationOwnerEmail: '',
        notes: '',
      });
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Unable to save transfer draft.');
    }
  };

  const handleWorkspaceSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError('');
    setSavingWorkspace(true);

    try {
      const response = await apiFetch('/workspace', authToken, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...workspaceForm,
          billingPlan: workspaceForm.workspaceType === 'rescue' ? undefined : workspaceForm.billingPlan,
        }),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to save flock settings.'));
      }

      const data = (await readJsonSafely<{ workspace?: Workspace }>(response)) ?? {};

      if (!data.workspace) {
        throw new Error('Unable to save flock settings.');
      }

      const savedWorkspace = data.workspace;

      setWorkspace(savedWorkspace);
      setAuthSession((current) =>
        current
          ? {
              ...current,
              activeWorkspace: savedWorkspace,
              workspaces: current.workspaces.map((entry) =>
                entry.workspace.id === savedWorkspace.id ? { ...entry, workspace: savedWorkspace } : entry,
              ),
            }
          : current,
      );
      setWorkspaceForm({
        name: savedWorkspace.name,
        workspaceType: savedWorkspace.workspaceType,
        billingEmail: savedWorkspace.billingEmail ?? '',
        billingPlan: isHouseholdPlan(savedWorkspace.billingPlan) ? savedWorkspace.billingPlan : 'household_basic',
      });
    } catch (workspaceError) {
      setError(workspaceError instanceof Error ? workspaceError.message : 'Unable to save flock settings.');
    } finally {
      setSavingWorkspace(false);
    }
  };

  const handleCancelRescueRequest = async () => {
    if (!authToken) {
      return;
    }

    setError('');
    setCancelingRescueRequest(true);

    try {
      const response = await apiFetch('/workspace/rescue-status/cancel', authToken, {
        method: 'POST',
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to cancel rescue status request.'));
      }

      const data = (await readJsonSafely<{ workspace?: Workspace }>(response)) ?? {};

      if (!data.workspace) {
        throw new Error('Unable to cancel rescue status request.');
      }

      const savedWorkspace = data.workspace;

      setWorkspace(savedWorkspace);
      setAuthSession((current) =>
        current
          ? {
              ...current,
              activeWorkspace: savedWorkspace,
              workspaces: current.workspaces.map((entry) =>
                entry.workspace.id === savedWorkspace.id ? { ...entry, workspace: savedWorkspace } : entry,
              ),
            }
          : current,
      );
      setWorkspaceForm({
        name: savedWorkspace.name,
        workspaceType: savedWorkspace.workspaceType,
        billingEmail: savedWorkspace.billingEmail ?? '',
        billingPlan: isHouseholdPlan(savedWorkspace.billingPlan) ? savedWorkspace.billingPlan : 'household_basic',
      });
    } catch (workspaceError) {
      setError(workspaceError instanceof Error ? workspaceError.message : 'Unable to cancel rescue status request.');
    } finally {
      setCancelingRescueRequest(false);
    }
  };

  const handleWorkspaceMemberSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError('');
    setSavingWorkspaceMember(true);

    try {
      const response = await apiFetch('/workspace/members', authToken, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(workspaceMemberForm),
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to add rescue team member.'));
      }

      const data = (await readJsonSafely<{ member?: WorkspaceMember }>(response)) ?? {};

      if (!data.member) {
        throw new Error('Unable to add rescue team member.');
      }

      const nextMember = {
        ...data.member,
        email: data.member.inviteEmail,
      };

      setWorkspaceMembers((current) => [...current, nextMember]);
      setWorkspaceMemberForm(emptyWorkspaceMemberForm);
    } catch (memberError) {
      setError(memberError instanceof Error ? memberError.message : 'Unable to add rescue team member.');
    } finally {
      setSavingWorkspaceMember(false);
    }
  };

  const handleRemoveWorkspaceMember = async (memberId: string) => {
    setError('');
    setRemovingWorkspaceMemberId(memberId);

    try {
      const response = await apiFetch(`/workspace/members/${memberId}`, authToken, {
        method: 'DELETE',
      });

      if (!response.ok) {
        throw new Error(await readErrorMessage(response, 'Unable to remove rescue team member.'));
      }

      setWorkspaceMembers((current) => current.filter((member) => member.id !== memberId));
    } catch (memberError) {
      setError(memberError instanceof Error ? memberError.message : 'Unable to remove rescue team member.');
    } finally {
      setRemovingWorkspaceMemberId('');
    }
  };

  const handleWeightRangeAlertClick = () => {
    if (!outOfRangeBirds.length) {
      return;
    }
    setShowWeightAlertModal(true);
  };

  if (authLoading) {
    return (
      <main className="auth-shell">
        <section className="hero-card auth-hero-card">
          <div>
            <p className="eyebrow">FlockPal</p>
            <h1>Loading your flock spaces...</h1>
            <p className="muted">Checking your sign-in and flock access.</p>
          </div>
        </section>
      </main>
    );
  }

  if (!authSession) {
    return (
      <main className="auth-shell">
        <section className="panel auth-panel">
          <div className="auth-copy">
            <figure className="auth-illustration-card">
              <img src={flockPalLandingArt} alt="FlockPal branding with a colorful trio of birds perched together." />
            </figure>
            <h1>A calmer way to care for every bird in your flock</h1>
            <p className="muted">
              Track weights, vet visits, hatchdays, gotcha days, and the little routines that help your birds thrive.
            </p>
            <div className="summary-grid">
              <article className="summary-card">
                <strong>Daily care, all together</strong>
                <span>Keep reminders, records, and notes in one cheerful home for your flock.</span>
              </article>
              <article className="summary-card">
                <strong>Made for real bird people</strong>
                <span>From one spoiled companion bird to a lively whole flock, FlockPal keeps the details easy to revisit.</span>
              </article>
            </div>
          </div>

          <div className="auth-card">
            <div>
              <p className="eyebrow">Passwordless sign-in</p>
              <h2>Email link or provider</h2>
              <p className="muted">FlockPal no longer stores passwords. Use a magic link, Google, Microsoft, or Apple.</p>
            </div>

            {error ? <p className="error-banner">{error}</p> : null}
            {authNotice ? (
              <article className="summary-card">
                <strong>{authNotice.message}</strong>
                <span>
                  {authNotice.previewUrl ? (
                    <a href={authNotice.previewUrl}>Open the sign-in link</a>
                  ) : (
                    'The link expires quickly and can only be used once.'
                  )}
                </span>
              </article>
            ) : null}

            <form className="form-panel" onSubmit={handleAuthSubmit}>
              <label>
                Your name
                <input value={authForm.name} onChange={(event) => setAuthForm({ ...authForm, name: event.target.value })} />
              </label>
              <label>
                Email
                <input
                  type="email"
                  value={authForm.email}
                  onChange={(event) => setAuthForm({ ...authForm, email: event.target.value })}
                  required
                />
              </label>
              <button className="primary-button" type="submit" disabled={authSubmitting}>
                {authSubmitting ? 'Sending link...' : 'Email me a sign-in link'}
              </button>
            </form>

            <div className="auth-provider-stack">
              <p className="muted">Or continue with a common sign-in provider.</p>
              {authProviders.map((provider) => (
                <a
                  key={provider.providerKey}
                  className={`provider-button provider-${provider.providerKey} ${provider.enabled ? '' : 'disabled'}`}
                  href={provider.enabled ? oauthStartUrl(provider.providerKey) : undefined}
                  onClick={(event) => {
                    if (!provider.enabled) {
                      event.preventDefault();
                    }
                  }}
                  aria-disabled={!provider.enabled}
                >
                  <span className="provider-button-mark" aria-hidden="true">
                    <ProviderIcon providerKey={provider.providerKey} />
                  </span>
                  <span className="provider-button-copy">
                    <strong>Continue with {provider.displayName}</strong>
                    <small>{provider.enabled ? 'Use your existing account to sign in.' : 'Not configured on this server yet.'}</small>
                  </span>
                </a>
              ))}
            </div>
          </div>
        </section>
      </main>
    );
  }

  if (loading) {
    return (
      <main className="app-shell">
        <section className="hero-card">
          <p>Loading flock data...</p>
        </section>
      </main>
    );
  }

  const showWorkspaceSwitcher = authSession.workspaces.length > 1;

  return (
    <main className="app-shell">
      <div className="side-rail">
        <div className="brand-lockup">
          <img className="side-nav-logo" src={flockPalLandingArt} alt="FlockPal" />
        </div>
        <aside className="side-nav panel">
        <div className="page-tabs" role="tablist" aria-label="Main navigation">
          <button className={`page-tab ${activePage === 'overview' ? 'active' : ''}`} onClick={() => setActivePage('overview')} type="button">
            Overview
          </button>
          <button className={`page-tab ${activePage === 'flock' ? 'active' : ''}`} onClick={() => setActivePage('flock')} type="button">
            Flock
          </button>
          <button className={`page-tab ${activePage === 'settings' ? 'active' : ''}`} onClick={() => setActivePage('settings')} type="button">
            Settings
          </button>
          {authSession.isAdmin ? (
            <button className={`page-tab ${activePage === 'admin' ? 'active' : ''}`} onClick={() => setActivePage('admin')} type="button">
              Admin
            </button>
          ) : null}
        </div>

        {showWorkspaceSwitcher ? (
          <section className="workspace-switcher">
            <div className="workspace-switcher-list">
              {authSession.workspaces.map((entry) => (
                <button
                  key={`${entry.workspace.id}-${entry.membership.id}`}
                  className={`workspace-switcher-item ${entry.workspace.id === workspace?.id ? 'active' : ''}`}
                  onClick={() => handleWorkspaceSwitch(entry.workspace.id)}
                  type="button"
                  disabled={switchingWorkspaceId === entry.workspace.id}
                >
                  <span>{entry.workspace.name}</span>
                  <small>
                    {formatBillingPlanName(entry.workspace.billingPlan)} • {formatWorkspaceRole(entry.membership.role)}
                  </small>
                </button>
              ))}
            </div>
          </section>
        ) : null}
        <button className="secondary-button" onClick={handleLogout} type="button">
          Log out
        </button>
        </aside>
      </div>

      <section className="content-shell">
        {error ? <p className="error-banner">{error}</p> : null}

        {activePage === 'overview' ? (
          <section className="stack-grid">
          <section className="panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">Overview</p>
                <h2>30-day flock weight snapshot</h2>
              </div>
              <div className="button-row overview-alert-actions">
                {outOfRangeBirds.length ? (
                  <button className="range-alert-button" onClick={handleWeightRangeAlertClick} type="button">
                    {outOfRangeBirds.length} weight range alert{outOfRangeBirds.length === 1 ? '' : 's'}
                  </button>
                ) : null}
                <p className="muted">{birdsWithRecentWeights.length} birds with recent entries</p>
              </div>
            </div>

            <div className="chart-card overview-chart-card">
              <svg viewBox="0 0 520 220" className="weight-chart" role="img" aria-label="All birds weight overview">
                {overviewChart.yTicks.map((tick) => (
                  <g key={tick.label}>
                    <line
                      x1={OVERVIEW_PADDING.left}
                      y1={tick.y}
                      x2={OVERVIEW_WIDTH - OVERVIEW_PADDING.right}
                      y2={tick.y}
                      className="chart-grid-line"
                    />
                    <text x={OVERVIEW_PADDING.left - 10} y={tick.y + 4} textAnchor="end" className="chart-axis-label">
                      {tick.label}
                    </text>
                  </g>
                ))}
                <line
                  x1={OVERVIEW_PADDING.left}
                  y1={OVERVIEW_HEIGHT - OVERVIEW_PADDING.bottom}
                  x2={OVERVIEW_WIDTH - OVERVIEW_PADDING.right}
                  y2={OVERVIEW_HEIGHT - OVERVIEW_PADDING.bottom}
                  className="chart-axis-line"
                />
                {overviewChart.xTicks.map((tick) => (
                  <text key={tick.label} x={tick.x} y={OVERVIEW_HEIGHT - 10} textAnchor="middle" className="chart-axis-label">
                    {tick.label}
                  </text>
                ))}
                {overviewChart.series.map(({ bird, points }) => (
                  <g key={bird.id}>
                    {points.length > 1 ? (
                      <path d={toOverviewPath(points)} fill="none" stroke={bird.chartColor} strokeWidth="3.5" strokeLinecap="round" />
                    ) : null}
                    {points.map((point) => (
                      <circle key={point.id} cx={point.x} cy={point.y} r="4.5" fill={bird.chartColor}>
                        <title>{`${bird.name}: ${point.label}`}</title>
                      </circle>
                    ))}
                  </g>
                ))}
              </svg>
            </div>

            <div className="legend-grid">
              {overviewChart.plottedBirds.map(({ bird }) => {
                return (
                  <article key={bird.id} className="legend-card">
                    <span className="legend-swatch" style={{ background: bird.chartColor }} />
                    <div>
                      <strong>{bird.name}</strong>
                    </div>
                  </article>
                );
              })}
            </div>
          </section>

          <section className="forms-grid">
            <article className="panel form-panel pulse-panel">
              <div className="panel-header">
                <div>
                  <p className="eyebrow">Flock health Pulse</p>
                </div>
              </div>
              <div className="summary-grid">
                {missingFirstWeightCount > 0 ? (
                  <article className="summary-card">
                    <strong>{missingFirstWeightCount}</strong>
                    <span>Members still needing a first weight</span>
                  </article>
                ) : null}
                {outOfRangeBirds.length ? (
                  <article className="summary-card summary-alert-card">
                    <span>Weight range alerts</span>
                    <strong>
                      {outOfRangeBirds.length} bird{outOfRangeBirds.length === 1 ? '' : 's'} outside typical ranges
                    </strong>
                    <button className="range-alert-button" onClick={handleWeightRangeAlertClick} type="button">
                      Review alerts
                    </button>
                  </article>
                ) : null}
                <article className="summary-card">
                  <span>Weekly flock changes</span>
                  {flockWeeklyTrendItems.length ? (
                    <div className="summary-list">
                      {flockWeeklyTrendItems.map((trendItem) => (
                        <strong key={trendItem.id} className="summary-trend-row">
                          <span className="summary-trend-name" style={{ color: trendItem.chartColor }}>
                            {trendItem.name}
                          </span>
                          <span>: </span>
                          <span
                            className={
                              trendItem.direction === 'positive' ? 'summary-trend-change positive' : 'summary-trend-change negative'
                            }
                          >
                            {trendItem.formattedChange}
                          </span>
                        </strong>
                      ))}
                    </div>
                  ) : (
                    <strong>No weekly changes yet</strong>
                  )}
                </article>
              </div>
            </article>
          </section>
          </section>
        ) : null}

        {activePage === 'admin' && authSession.isAdmin ? (
          <section className="stack-grid">
            <article className="panel">
              <div className="panel-header">
                <div>
                  <p className="eyebrow">Admin</p>
                  <h2>Platform pulse</h2>
                </div>
                <p className="muted">Operational counts for the full FlockPal platform.</p>
              </div>
              <div className="summary-grid">
                <article className="summary-card">
                  <span>Total birds</span>
                  <strong>{adminSummary?.totalBirds ?? '-'}</strong>
                </article>
                <article className="summary-card">
                  <span>Daily users</span>
                  <strong>{adminSummary?.dailyUsers ?? '-'}</strong>
                </article>
                <article className="summary-card">
                  <span>Total users</span>
                  <strong>{adminSummary?.totalUsers ?? '-'}</strong>
                </article>
                <article className="summary-card">
                  <span>Flocks</span>
                  <strong>{adminSummary?.totalWorkspaces ?? '-'}</strong>
                </article>
                <article className="summary-card">
                  <span>Rescue flocks</span>
                  <strong>{adminSummary?.rescueWorkspaces ?? '-'}</strong>
                </article>
                <article className="summary-card">
                  <span>Pending rescues</span>
                  <strong>{adminSummary?.pendingRescues ?? '-'}</strong>
                </article>
              </div>
            </article>

            <article className="panel">
              <div className="panel-header">
                <div>
                  <p className="eyebrow">Verification</p>
                  <h2>Rescue flocks</h2>
                </div>
                <p className="muted">Pending rescues are read-only until approved.</p>
              </div>
              <div className="recent-list">
                {adminRescueWorkspaces.length ? (
                  adminRescueWorkspaces.map((entry) => (
                    <article key={entry.workspace.id} className="vet-visit-card">
                      <strong>{entry.workspace.name}</strong>
                      <span>
                        {formatRescueVerificationStatus(entry.workspace.rescueVerificationStatus)} • {entry.birdCount} birds • {entry.memberCount} members
                      </span>
                      <small>
                        Owner {entry.ownerEmail ?? 'unknown'} • Billing {entry.workspace.billingEmail ?? 'not set'}
                      </small>
                      <div className="button-row">
                        <button
                          className="secondary-button"
                          onClick={() => handleRescueVerificationStatusChange(entry.workspace.id, 'approved')}
                          type="button"
                          disabled={updatingRescueWorkspaceId === entry.workspace.id || entry.workspace.rescueVerificationStatus === 'approved'}
                        >
                          Approve
                        </button>
                        <button
                          className="secondary-button"
                          onClick={() => handleRescueVerificationStatusChange(entry.workspace.id, 'pending')}
                          type="button"
                          disabled={updatingRescueWorkspaceId === entry.workspace.id || entry.workspace.rescueVerificationStatus === 'pending'}
                        >
                          Mark pending
                        </button>
                        <button
                          className="secondary-button"
                          onClick={() => handleRescueVerificationStatusChange(entry.workspace.id, 'rejected')}
                          type="button"
                          disabled={updatingRescueWorkspaceId === entry.workspace.id || entry.workspace.rescueVerificationStatus === 'rejected'}
                        >
                          Reject and make household
                        </button>
                      </div>
                    </article>
                  ))
                ) : (
                  <article className="vet-visit-card empty-card">
                    <strong>No rescue flocks yet</strong>
                    <small>New rescue flocks will appear here for verification review.</small>
                  </article>
                )}
              </div>
            </article>
          </section>
        ) : null}

        {activePage === 'flock' ? (
          <section className={showFlockDetailColumn ? 'dashboard-grid' : 'stack-grid'}>
            <aside className="panel bird-list-panel">
              <div className="panel-header">
                <div>
                  <p className="eyebrow">Flock</p>
                  <h2>Flock members</h2>
                  <p className="muted">Select a bird to view more details.</p>
                </div>
                <div className="button-row">
                  <button className="secondary-button" onClick={() => setBulkWeightOpen((current) => !current)} type="button">
                    {bulkWeightOpen ? 'Hide bulk add' : 'Bulk add weights'}
                  </button>
                  <button className="secondary-button" onClick={startCreateBird} type="button">
                    Add bird
                  </button>
                </div>
              </div>
              <div className="bird-list">
                {birds.map((bird) => (
                  <button
                    key={bird.id}
                    className={`bird-card ${bird.id === selectedBird?.id ? 'active' : ''}`}
                    onClick={() => setSelectedBirdId(bird.id)}
                    type="button"
                    style={bird.id === selectedBird?.id ? { borderColor: bird.chartColor, boxShadow: `0 16px 24px ${bird.chartColor}33` } : undefined}
                  >
                    <div className="bird-card-header">
                      {bird.photoDataUrl ? (
                        <img className="bird-avatar" src={bird.photoDataUrl} alt={`${bird.name}`} />
                      ) : (
                        <div className="bird-avatar placeholder-avatar" aria-hidden="true">
                          {bird.name.slice(0, 1).toUpperCase()}
                        </div>
                      )}
                      <div className="bird-card-copy">
                        <span className="bird-card-title">
                          <span>{bird.name}</span>
                          <span aria-label={getBirdGenderLabel(bird)} className={`gender-inline ${bird.gender}`}>
                            {getBirdGenderSymbol(bird)}
                          </span>
                        </span>
                        <small>{bird.species}</small>
                      </div>
                    </div>
                    <strong>{formatWeight(bird.latestWeightGrams)}</strong>
                    {birdWeightAssessments[bird.id]?.status === 'below' || birdWeightAssessments[bird.id]?.status === 'above' ? (
                      <span className="bird-alert-badge">
                        {birdWeightAssessments[bird.id]?.status === 'below' ? 'Below chart range' : 'Above chart range'}
                      </span>
                    ) : null}
                  </button>
                ))}
              </div>
            </aside>

            {showFlockDetailColumn ? (
              <section className="flock-detail-column">
                {bulkWeightOpen ? (
                  <section className="panel bulk-weight-panel">
                    <div className="panel-header">
                      <div>
                        <p className="eyebrow">Weigh-in</p>
                        <h2>Bulk add weights</h2>
                      </div>
                      <label className="bulk-date-field">
                        Date
                        <input type="date" value={bulkWeightDate} onChange={(event) => setBulkWeightDate(event.target.value)} required />
                      </label>
                    </div>
                    <form className="bulk-weight-form" onSubmit={handleBulkWeightSubmit}>
                      <div className="bulk-weight-table-shell">
                        <table className="bulk-weight-table">
                          <thead>
                            <tr>
                              <th>Flock member</th>
                              <th>Last weight</th>
                              <th>Weight today</th>
                            </tr>
                          </thead>
                          <tbody>
                            {birds.map((bird) => (
                              <tr key={bird.id}>
                                <td>{bird.name}</td>
                                <td>{formatWeight(bird.latestWeightGrams)}</td>
                                <td>
                                  <input
                                    type="number"
                                    min="1"
                                    step="0.1"
                                    value={bulkWeightRows[bird.id]?.weightGrams ?? ''}
                                    onChange={(event) => handleBulkWeightValueChange(bird.id, event.target.value)}
                                    placeholder="g"
                                  />
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                      <div className="button-row">
                        <button className="primary-button" type="submit" disabled={savingBulkWeights}>
                          {savingBulkWeights ? 'Saving weights...' : 'Save bulk weights'}
                        </button>
                        <button
                          className="secondary-button"
                          onClick={() =>
                            setBulkWeightRows((current) => Object.fromEntries(Object.keys(current).map((birdId) => [birdId, { weightGrams: '' }])))
                          }
                          type="button"
                          disabled={savingBulkWeights}
                        >
                          Clear entries
                        </button>
                      </div>
                    </form>
                  </section>
                ) : null}

                {selectedBird ? (
                  <section className="panel flock-member-panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">Flock member</p>
                <h2>{selectedBird.name}</h2>
              </div>
              <div className="button-row">
                <button className="secondary-button" onClick={() => startEditBird(selectedBird)} type="button">
                  Edit details
                </button>
                <button className="danger-button" onClick={handleRemoveBird} type="button" disabled={deletingBird}>
                  {deletingBird ? 'Removing...' : 'Remove from flock'}
                </button>
              </div>
            </div>

              <>
                <section className="profile-hero">
                  {selectedBird.photoDataUrl ? (
                    <img className="profile-photo" src={selectedBird.photoDataUrl} alt={`${selectedBird.name}`} />
                  ) : (
                    <div className="profile-photo placeholder-avatar" aria-hidden="true">
                      {selectedBird.name.slice(0, 1).toUpperCase()}
                    </div>
                  )}
                  <div className="profile-copy">
                    <p className="eyebrow">Profile</p>
                    <h3 className="profile-title">
                      <span>{selectedBird.name}</span>
                      <span
                        aria-label={getBirdGenderLabel(selectedBird)}
                        className={`gender-symbol ${selectedBird.gender}`}
                      >
                        {getBirdGenderSymbol(selectedBird)}
                      </span>
                    </h3>
                    <p className="muted">
                      {selectedBird.species} • Band {selectedBird.tagId}
                    </p>
                    <p className="muted">Added {formatDate(selectedBird.createdAt.slice(0, 10))}</p>
                  </div>
                </section>

                <div className="detail-grid">
                  <article className="detail-card">
                    <span>Name</span>
                    <strong>{selectedBird.name}</strong>
                  </article>
                  <article className="detail-card">
                    <span>Band ID</span>
                    <strong>{selectedBird.tagId}</strong>
                  </article>
                  <article className="detail-card">
                    <span>DOB</span>
                    <strong>{formatDate(selectedBird.dateOfBirth)}</strong>
                  </article>
                  <article className="detail-card">
                    <span>Gotcha day</span>
                    <strong>{formatDate(selectedBird.gotchaDay)}</strong>
                  </article>
                  <article className="detail-card">
                    <span>Species</span>
                    <strong>{selectedBird.species}</strong>
                  </article>
                  <article className="detail-card">
                    <span>Gender</span>
                    <strong className="detail-gender">
                      <span aria-hidden="true" className={`gender-symbol ${selectedBird.gender}`}>
                        {getBirdGenderSymbol(selectedBird)}
                      </span>
                      {getBirdGenderLabel(selectedBird)}
                    </strong>
                  </article>
                  <article className="detail-card">
                    <span>Latest weight</span>
                    <strong>{formatWeight(selectedBird.latestWeightGrams)}</strong>
                  </article>
                </div>

                <div className="flock-member-sections">
                  <section className="panel inset-panel">
                    <div className="panel-header">
                      <div>
                        <p className="eyebrow">Weight</p>
                        <h2>Trend and log</h2>
                      </div>
                      <p className="muted">Latest reading: {formatShortDate(selectedBird.latestRecordedOn)}</p>
                    </div>
                    <div className="chart-card">
                      <svg
                        viewBox={`0 0 ${MEMBER_CHART_WIDTH} ${MEMBER_CHART_HEIGHT}`}
                        className="weight-chart"
                        role="img"
                        aria-label="Selected flock member weight trend chart"
                      >
                        <defs>
                          <linearGradient id="lineGlow" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" stopColor={selectedBird.chartColor} stopOpacity="0.45" />
                            <stop offset="100%" stopColor={selectedBird.chartColor} />
                          </linearGradient>
                        </defs>
                        {selectedBirdChart.yTicks.map((tick) => (
                          <g key={tick.label}>
                            <line
                              x1={MEMBER_CHART_PADDING.left}
                              y1={tick.y}
                              x2={MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right}
                              y2={tick.y}
                              className="chart-grid-line"
                            />
                            <text x={MEMBER_CHART_PADDING.left - 10} y={tick.y + 4} textAnchor="end" className="chart-axis-label">
                              {tick.label}
                            </text>
                          </g>
                        ))}
                        <line
                          x1={MEMBER_CHART_PADDING.left}
                          y1={MEMBER_CHART_HEIGHT - MEMBER_CHART_PADDING.bottom}
                          x2={MEMBER_CHART_WIDTH - MEMBER_CHART_PADDING.right}
                          y2={MEMBER_CHART_HEIGHT - MEMBER_CHART_PADDING.bottom}
                          className="chart-axis-line"
                        />
                        {selectedBirdChart.xTicks.map((tick) => (
                          <text
                            key={`${tick.label}-${tick.x}`}
                            x={tick.x}
                            y={MEMBER_CHART_HEIGHT - 10}
                            textAnchor="middle"
                            className="chart-axis-label"
                          >
                            {tick.label}
                          </text>
                        ))}
                        {hasSelectedBirdLine && selectedBirdChart.isFlat ? (
                          <line
                            x1={selectedBirdChart.points[0].x}
                            y1={selectedBirdChart.points[0].y}
                            x2={selectedBirdChart.points[selectedBirdChart.points.length - 1].x}
                            y2={selectedBirdChart.points[selectedBirdChart.points.length - 1].y}
                            stroke={selectedBird.chartColor}
                            strokeWidth="4"
                            strokeLinecap="round"
                          />
                        ) : null}
                        {hasSelectedBirdLine && !selectedBirdChart.isFlat ? (
                          <path d={selectedBirdChart.path} fill="none" stroke="url(#lineGlow)" strokeWidth="4" strokeLinecap="round" />
                        ) : null}
                        {selectedBirdChart.points.map((point) => (
                          <circle key={point.id} cx={point.x} cy={point.y} r="5" fill={selectedBird.chartColor} stroke="#fffdf9" strokeWidth="2">
                            <title>{point.label}</title>
                          </circle>
                        ))}
                      </svg>
                      <div className="chart-footer">
                        <p>{selectedBirdTrendCopy}</p>
                        <span>{weights.length ? `${weights.length} data point${weights.length === 1 ? '' : 's'}` : 'No data yet'}</span>
                      </div>
                    </div>

                    <form className="form-panel inline-form" onSubmit={handleWeightSubmit}>
                      <label>
                        Weight in grams
                        <input
                          type="number"
                          min="1"
                          step="0.1"
                          value={weightForm.weightGrams}
                          onChange={(event) => setWeightForm({ ...weightForm, weightGrams: event.target.value })}
                          required
                        />
                      </label>
                      <label>
                        Recorded on
                        <input
                          type="date"
                          value={weightForm.recordedOn}
                          onChange={(event) => setWeightForm({ ...weightForm, recordedOn: event.target.value })}
                          required
                        />
                      </label>
                      <label className="wide-field">
                        Notes
                        <textarea
                          rows={3}
                          value={weightForm.notes}
                          onChange={(event) => setWeightForm({ ...weightForm, notes: event.target.value })}
                          placeholder="Optional notes about appetite, molt, meds, or behavior"
                        />
                      </label>
                      <button className="primary-button" type="submit">
                        Save weight
                      </button>
                    </form>
                  </section>

                  <section className="panel inset-panel">
                    <div className="panel-header">
                      <div>
                        <p className="eyebrow">Vet visits</p>
                        <h2>Care history and notes</h2>
                      </div>
                    </div>

                    <form className="form-panel inline-form" onSubmit={handleVetVisitSubmit}>
                      <label>
                        Visit date
                        <input
                          type="date"
                          value={vetVisitForm.visitedOn}
                          onChange={(event) => setVetVisitForm({ ...vetVisitForm, visitedOn: event.target.value })}
                          required
                        />
                      </label>
                      <label>
                        Clinic
                        <input
                          value={vetVisitForm.clinicName}
                          onChange={(event) => setVetVisitForm({ ...vetVisitForm, clinicName: event.target.value })}
                          required
                        />
                      </label>
                      <label>
                        Reason
                        <input
                          value={vetVisitForm.reason}
                          onChange={(event) => setVetVisitForm({ ...vetVisitForm, reason: event.target.value })}
                          required
                        />
                      </label>
                      <label className="wide-field">
                        Notes
                        <textarea
                          rows={3}
                          value={vetVisitForm.notes}
                          onChange={(event) => setVetVisitForm({ ...vetVisitForm, notes: event.target.value })}
                          placeholder="Exam notes, medications, follow-ups, or restrictions"
                        />
                      </label>
                      <div className="button-row wide-field">
                        <button className="primary-button" type="submit">
                          {editingVetVisitId ? 'Save vet visit changes' : 'Save vet visit'}
                        </button>
                        {editingVetVisitId ? (
                          <button className="secondary-button" onClick={handleCancelVetVisitEdit} type="button">
                            Cancel edit
                          </button>
                        ) : null}
                      </div>
                    </form>

                    <div className="recent-list">
                      {vetVisits.length ? (
                        vetVisits.map((visit) => (
                          <article key={visit.id} className="vet-visit-card">
                            <strong>{visit.reason}</strong>
                            <span>
                              {formatDate(visit.visitedOn)} • {visit.clinicName}
                            </span>
                            <small>{visit.notes || 'No notes recorded.'}</small>
                            <div className="button-row">
                              <button className="secondary-button" onClick={() => handleEditVetVisit(visit)} type="button">
                                Edit
                              </button>
                              {editingVetVisitId === visit.id ? (
                                <button
                                  className="secondary-button"
                                  onClick={() => handleDeleteVetVisit(visit.id)}
                                  type="button"
                                  disabled={deletingVetVisitId === visit.id}
                                >
                                  {deletingVetVisitId === visit.id ? 'Deleting...' : 'Delete'}
                                </button>
                              ) : null}
                            </div>
                          </article>
                        ))
                      ) : (
                        <article className="vet-visit-card empty-card">
                          <strong>No vet visits yet</strong>
                          <small>Add the first visit above to start this care history.</small>
                        </article>
                      )}
                    </div>
                  </section>
                </div>
              </>
                  </section>
                ) : null}
              </section>
            ) : null}
          </section>
        ) : null}

        {activePage === 'settings' ? (
          <section className="forms-grid settings-grid">
          <article className="panel form-panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">Flock</p>
                <h2>Flock profile and billing</h2>
              </div>
            </div>
            <p className="muted">
              Each flock carries its own billing and collaboration rules. That lets one person keep a personal household flock while also
              participating in a rescue flock without mixing billing or bird ownership.
            </p>
            <form className="form-panel" onSubmit={handleWorkspaceSubmit}>
              <label>
                Flock name
                <input value={workspaceForm.name} onChange={(event) => setWorkspaceForm({ ...workspaceForm, name: event.target.value })} required />
              </label>
              <label>
                Flock type
                <select
                  value={workspaceForm.workspaceType}
                  onChange={(event) =>
                    setWorkspaceForm({
                      ...workspaceForm,
                      workspaceType: event.target.value as WorkspaceFormState['workspaceType'],
                    })
                  }
                >
                  <option value="standard">Standard household</option>
                  <option value="rescue">Rescue</option>
                </select>
              </label>
              {workspace?.workspaceType === 'standard' && workspaceForm.workspaceType === 'rescue' ? (
                <article className="summary-card summary-alert-card">
                  <strong>Approval required before edits continue</strong>
                  <span>
                    Changing this household flock to a rescue flock will make it read-only until FlockPal approves the rescue verification.
                    Monitor the email address used to sign up for any follow-up details needed to approve rescue status.
                  </span>
                </article>
              ) : null}
              {workspaceForm.workspaceType === 'standard' ? (
                <>
                  <label>
                    Household plan
                    <select
                      value={workspaceForm.billingPlan}
                      onChange={(event) =>
                        setWorkspaceForm({
                          ...workspaceForm,
                          billingPlan: event.target.value as WorkspaceFormState['billingPlan'],
                        })
                      }
                    >
                      <option value="household_basic">Conure</option>
                      <option value="household_plus">Indian Ringneck</option>
                      <option value="household_macaw">Macaw</option>
                    </select>
                  </label>
                  <article className="summary-card">
                    <strong>{formatBillingPlanName(workspaceForm.billingPlan)}</strong>
                    <span>{formatBillingPlanCapacity(workspaceForm.billingPlan)}</span>
                  </article>
                </>
              ) : (
                <article className="summary-card">
                  <strong>{formatBillingPlanName('rescue_free')}</strong>
                  <span>Rescue flocks stay free while still supporting shared team access.</span>
                </article>
              )}
              <label>
                Billing contact email
                <input
                  type="email"
                  value={workspaceForm.billingEmail}
                  onChange={(event) => setWorkspaceForm({ ...workspaceForm, billingEmail: event.target.value })}
                  placeholder="Optional for later billing and account management"
                />
              </label>
              <button className="primary-button" type="submit" disabled={savingWorkspace}>
                {savingWorkspace ? 'Saving flock...' : 'Save flock settings'}
              </button>
            </form>
          </article>

          <article className="panel form-panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">Billing</p>
                <h2>Billing info</h2>
              </div>
            </div>
            <div className="summary-grid">
              <article className="summary-card">
                <strong>{workspace ? formatBillingPlanName(workspace.billingPlan) : 'No plan yet'}</strong>
                <span>{workspace ? formatBillingPlanCapacity(workspace.billingPlan) : 'Pick a flock plan to see bird capacity.'}</span>
              </article>
              <article className="summary-card">
                <strong>{workspace ? formatSubscriptionStatus(workspace.subscriptionStatus) : 'Unknown'}</strong>
                <span>Flock write access will follow subscription health once billing is connected.</span>
              </article>
              {workspace?.workspaceType === 'rescue' ? (
                <article className="summary-card">
                  <strong>{formatRescueVerificationStatus(workspace.rescueVerificationStatus)}</strong>
                  <span>Rescue flocks are read-only until an admin approves their verification.</span>
                  {workspace.rescueVerificationStatus === 'pending' &&
                  (activeMembership?.role === 'owner' || activeMembership?.role === 'assistant') ? (
                    <button
                      className="secondary-button"
                      type="button"
                      onClick={handleCancelRescueRequest}
                      disabled={cancelingRescueRequest}
                    >
                      {cancelingRescueRequest ? 'Canceling request...' : 'Cancel rescue request'}
                    </button>
                  ) : null}
                </article>
              ) : null}
              <article className="summary-card">
                <strong>{workspace?.billingEmail || authSession.user.email}</strong>
                <span>Billing contact for invoices, receipts, and account notices.</span>
              </article>
              <article className="summary-card">
                <strong>
                  {workspace && formatBillingPlanBirdLimit(workspace.billingPlan)
                    ? `${birds.length} / ${formatBillingPlanBirdLimit(workspace.billingPlan)} birds`
                    : `${birds.length} bird${birds.length === 1 ? '' : 's'}`}
                </strong>
                <span>
                  {workspace && formatBillingPlanBirdLimit(workspace.billingPlan)
                    ? 'Current bird count against your paid plan allowance.'
                    : 'Current bird count in this flock.'}
                </span>
              </article>
              <article className="summary-card">
                <strong>Stripe integration coming soon</strong>
                <span>Customer portal, payment method management, invoices, and renewal status will appear here.</span>
              </article>
            </div>
          </article>

          <article className="panel form-panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">Collaborators</p>
                <h2>Shared flock access</h2>
              </div>
              <button
                className="secondary-button"
                onClick={() =>
                  setExpandedSettingsSection((current) => (current === 'collaborators' ? null : 'collaborators'))
                }
                type="button"
                aria-expanded={expandedSettingsSection === 'collaborators'}
              >
                {expandedSettingsSection === 'collaborators' ? 'Close' : 'Open'}
              </button>
            </div>
            {expandedSettingsSection === 'collaborators' ? (
              <>
                <p className="muted">
                  Invite other people to help manage this flock. Rescue flocks support teams, and household flocks can also support
                  co-caregivers without changing who owns the billing.
                </p>
                <form className="form-panel" onSubmit={handleWorkspaceMemberSubmit}>
                  <label>
                    Team member name
                    <input
                      value={workspaceMemberForm.name}
                      onChange={(event) => setWorkspaceMemberForm({ ...workspaceMemberForm, name: event.target.value })}
                      required
                    />
                  </label>
                  <label>
                    Email
                    <input
                      type="email"
                      value={workspaceMemberForm.email}
                      onChange={(event) => setWorkspaceMemberForm({ ...workspaceMemberForm, email: event.target.value })}
                      required
                    />
                  </label>
                  <label>
                    Role
                    <select
                      value={workspaceMemberForm.role}
                      onChange={(event) =>
                        setWorkspaceMemberForm({
                          ...workspaceMemberForm,
                          role: event.target.value as WorkspaceMemberFormState['role'],
                        })
                      }
                    >
                      <option value="owner">Owner</option>
                      <option value="assistant">Assistant</option>
                      <option value="caregiver">Caregiver</option>
                      <option value="viewer">Viewer</option>
                    </select>
                  </label>
                  <button className="primary-button" type="submit" disabled={savingWorkspaceMember}>
                    {savingWorkspaceMember ? 'Adding member...' : 'Add collaborator'}
                  </button>
                </form>

                <div className="recent-list">
                  {workspaceMembers.length ? (
                    workspaceMembers.map((member) => (
                      <article key={member.id} className="vet-visit-card">
                        <strong>{member.name}</strong>
                        <span>
                          {formatWorkspaceRole(member.role)} • {member.email || member.inviteEmail}
                        </span>
                        <small>{member.acceptedAt ? 'Active access' : 'Invitation pending'}</small>
                        <button
                          className="secondary-button"
                          onClick={() => handleRemoveWorkspaceMember(member.id)}
                          type="button"
                          disabled={removingWorkspaceMemberId === member.id || member.role === 'owner'}
                        >
                          {member.role === 'owner' ? 'Owner' : removingWorkspaceMemberId === member.id ? 'Removing...' : 'Remove'}
                        </button>
                      </article>
                    ))
                  ) : (
                    <article className="vet-visit-card empty-card">
                      <strong>No collaborators yet</strong>
                      <small>Add the people who should be able to help care for birds in this flock.</small>
                    </article>
                  )}
                </div>
              </>
            ) : null}
          </article>

          <article className="panel form-panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">Automation</p>
                <h2>Integration tokens</h2>
              </div>
              <button
                className="secondary-button"
                onClick={() =>
                  setExpandedSettingsSection((current) => (current === 'integration-tokens' ? null : 'integration-tokens'))
                }
                type="button"
                aria-expanded={expandedSettingsSection === 'integration-tokens'}
              >
                {expandedSettingsSection === 'integration-tokens' ? 'Close' : 'Open'}
              </button>
            </div>
            {expandedSettingsSection === 'integration-tokens' ? (
              <>
                <p className="muted">
                  Create a flock-scoped token for automations like n8n. The secret is shown only once, so store it in your automation tool when it appears.
                </p>
                <form className="form-panel" onSubmit={handleCreateIntegrationToken}>
                  <label>
                    Token name
                    <input
                      value={integrationTokenForm.name}
                      onChange={(event) => setIntegrationTokenForm({ ...integrationTokenForm, name: event.target.value })}
                      placeholder="n8n household sync"
                      required
                    />
                  </label>
                  <label>
                    Access level
                    <select
                      value={integrationTokenForm.scope}
                      onChange={(event) =>
                        setIntegrationTokenForm({
                          ...integrationTokenForm,
                          scope: event.target.value as IntegrationTokenFormState['scope'],
                        })
                      }
                    >
                      <option value="read_write">Read and write</option>
                      <option value="read_only">Read only</option>
                    </select>
                  </label>
                  <label>
                    Expire after days
                    <input
                      type="number"
                      min="1"
                      max="3650"
                      value={integrationTokenForm.expiresInDays}
                      onChange={(event) => setIntegrationTokenForm({ ...integrationTokenForm, expiresInDays: event.target.value })}
                      placeholder="Optional"
                    />
                  </label>
                  <button className="primary-button" type="submit" disabled={creatingIntegrationToken}>
                    {creatingIntegrationToken ? 'Creating token...' : 'Create integration token'}
                  </button>
                </form>

                {newIntegrationTokenSecret ? (
                  <article className="summary-card integration-token-secret">
                    <strong>Copy this token now</strong>
                    <span>It will not be shown again after you leave this page or create another token.</span>
                    <input readOnly value={newIntegrationTokenSecret} onFocus={(event) => event.currentTarget.select()} />
                  </article>
                ) : null}

                <div className="recent-list">
                  {integrationTokens.length ? (
                    integrationTokens.map((token) => (
                      <article key={token.id} className="vet-visit-card">
                        <strong>{token.name}</strong>
                        <span>
                          {token.tokenPrefix}... • {token.scope === 'read_only' ? 'read only' : 'read and write'}
                        </span>
                        <small>
                          Last used {formatDateTime(token.lastUsedAt)} • Expires {token.expiresAt ? formatDateTime(token.expiresAt) : 'Never'}
                        </small>
                        <button
                          className="secondary-button"
                          onClick={() => handleRevokeIntegrationToken(token.id)}
                          type="button"
                          disabled={revokingIntegrationTokenId === token.id}
                        >
                          {revokingIntegrationTokenId === token.id ? 'Revoking...' : 'Revoke'}
                        </button>
                      </article>
                    ))
                  ) : (
                    <article className="vet-visit-card empty-card">
                      <strong>No integration tokens yet</strong>
                      <small>Create one for n8n, scripts, or other personal automations tied to this flock.</small>
                    </article>
                  )}
                </div>
              </>
            ) : null}
          </article>

          <article className="panel form-panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">New flock</p>
                <h2>Add another flock space</h2>
              </div>
              <button
                className="secondary-button"
                onClick={() =>
                  setExpandedSettingsSection((current) => (current === 'new-workspace' ? null : 'new-workspace'))
                }
                type="button"
                aria-expanded={expandedSettingsSection === 'new-workspace'}
              >
                {expandedSettingsSection === 'new-workspace' ? 'Close' : 'Open'}
              </button>
            </div>
            {expandedSettingsSection === 'new-workspace' ? (
              <>
                <p className="muted">
                  This is the key piece for someone who helps with a rescue but also keeps their own birds at home. Each flock stays separate
                  for access and billing.
                </p>
                <form className="form-panel" onSubmit={handleCreateWorkspace}>
                  <label>
                    Flock name
                    <input
                      value={workspaceCreateForm.name}
                      onChange={(event) => setWorkspaceCreateForm({ ...workspaceCreateForm, name: event.target.value })}
                      required
                    />
                  </label>
                  <label>
                    Flock type
                    <select
                      value={workspaceCreateForm.workspaceType}
                      onChange={(event) =>
                        setWorkspaceCreateForm({
                          ...workspaceCreateForm,
                          workspaceType: event.target.value as WorkspaceCreateFormState['workspaceType'],
                        })
                      }
                    >
                      <option value="standard">Standard household</option>
                      <option value="rescue">Rescue</option>
                    </select>
                  </label>
                  {workspaceCreateForm.workspaceType === 'standard' ? (
                    <>
                      <label>
                        Household plan
                        <select
                          value={workspaceCreateForm.billingPlan}
                          onChange={(event) =>
                            setWorkspaceCreateForm({
                              ...workspaceCreateForm,
                              billingPlan: event.target.value as WorkspaceCreateFormState['billingPlan'],
                            })
                          }
                        >
                          <option value="household_basic">Conure</option>
                          <option value="household_plus">Indian Ringneck</option>
                          <option value="household_macaw">Macaw</option>
                        </select>
                      </label>
                      <article className="summary-card">
                        <strong>{formatBillingPlanName(workspaceCreateForm.billingPlan)}</strong>
                        <span>{formatBillingPlanCapacity(workspaceCreateForm.billingPlan)}</span>
                      </article>
                    </>
                  ) : (
                    <article className="summary-card">
                      <strong>{formatBillingPlanName('rescue_free')}</strong>
                      <span>No billing is applied to rescue flocks.</span>
                    </article>
                  )}
                  <label>
                    Billing contact email
                    <input
                      type="email"
                      value={workspaceCreateForm.billingEmail}
                      onChange={(event) => setWorkspaceCreateForm({ ...workspaceCreateForm, billingEmail: event.target.value })}
                      placeholder="Used for household billing and account notices"
                    />
                  </label>
                  <button className="primary-button" type="submit" disabled={creatingWorkspace}>
                    {creatingWorkspace ? 'Creating flock...' : 'Create flock'}
                  </button>
                </form>
              </>
            ) : null}
          </article>

          <article className="panel form-panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">Bird profiles</p>
                <h2>{editingBird ? `Update ${editingBird.name}` : 'Flock member details'}</h2>
              </div>
              <button
                className="secondary-button"
                onClick={() =>
                  setExpandedSettingsSection((current) => (current === 'flock-member' ? null : 'flock-member'))
                }
                type="button"
                aria-expanded={expandedSettingsSection === 'flock-member'}
              >
                {expandedSettingsSection === 'flock-member' ? 'Close' : 'Open'}
              </button>
            </div>
            {expandedSettingsSection === 'flock-member' ? (
              <>
                <div className="button-row">
                  {selectedBird ? (
                    <button className="secondary-button" onClick={() => startEditBird(selectedBird)} type="button">
                      Edit selected profile
                    </button>
                  ) : null}
                  <button className="secondary-button" onClick={startCreateBird} type="button">
                    New bird profile
                  </button>
                </div>

                <div className="picker-list">
                  {birds.map((bird) => (
                    <button
                      key={bird.id}
                      className={`picker-chip ${editingBirdId === bird.id ? 'active' : ''}`}
                      onClick={() => startEditBird(bird)}
                      type="button"
                    >
                      {bird.name}
                    </button>
                  ))}
                </div>

                <form className="form-panel" onSubmit={handleBirdSubmit}>
                  <label>
                    Bird name
                    <input value={birdForm.name} onChange={(event) => setBirdForm({ ...birdForm, name: event.target.value })} required />
                  </label>
                  <label>
                    Band ID
                    <input value={birdForm.tagId} onChange={(event) => setBirdForm({ ...birdForm, tagId: event.target.value })} required />
                  </label>
                  <label className="species-picker-field">
                    Species
                    <div className="species-picker">
                      <input
                        value={birdForm.species}
                        onChange={(event) => {
                          setBirdForm({ ...birdForm, species: event.target.value });
                          setSpeciesPickerOpen(true);
                        }}
                        onFocus={() => setSpeciesPickerOpen(true)}
                        onBlur={() => {
                          window.setTimeout(() => {
                            setSpeciesPickerOpen(false);
                          }, 120);
                        }}
                        placeholder="Start typing a species"
                        autoComplete="off"
                        required
                      />
                      {speciesPickerOpen ? (
                        <div className="species-picker-menu">
                          {filteredSpeciesOptions.length ? (
                            filteredSpeciesOptions.map((speciesOption) => (
                              <button
                                key={speciesOption}
                                className={`species-picker-option ${birdForm.species === speciesOption ? 'active' : ''}`}
                                onMouseDown={(event) => {
                                  event.preventDefault();
                                  setBirdForm({ ...birdForm, species: speciesOption });
                                  setSpeciesPickerOpen(false);
                                }}
                                type="button"
                              >
                                {speciesOption}
                              </button>
                            ))
                          ) : (
                            <div className="species-picker-empty">No matching species yet. Keep typing to add a custom entry.</div>
                          )}
                        </div>
                      ) : null}
                    </div>
                    <small className="muted">Search or select a species so alerts and chart references stay consistent.</small>
                  </label>
                  <div className="segmented-field">
                    <span>Gender</span>
                    <div className="segmented-control" role="radiogroup" aria-label="Bird gender">
                      <button
                        className={`segmented-option ${birdForm.gender === 'unknown' ? 'active' : ''}`}
                        onClick={() => setBirdForm({ ...birdForm, gender: 'unknown' })}
                        type="button"
                        role="radio"
                        aria-checked={birdForm.gender === 'unknown'}
                      >
                        <span className="gender-symbol unknown" aria-hidden="true">
                          ?
                        </span>
                        Unknown
                      </button>
                      <button
                        className={`segmented-option ${birdForm.gender === 'male' ? 'active' : ''}`}
                        onClick={() => setBirdForm({ ...birdForm, gender: 'male' })}
                        type="button"
                        role="radio"
                        aria-checked={birdForm.gender === 'male'}
                      >
                        <span className="gender-symbol male" aria-hidden="true">
                          ♂
                        </span>
                        Male
                      </button>
                      <button
                        className={`segmented-option ${birdForm.gender === 'female' ? 'active' : ''}`}
                        onClick={() => setBirdForm({ ...birdForm, gender: 'female' })}
                        type="button"
                        role="radio"
                        aria-checked={birdForm.gender === 'female'}
                      >
                        <span className="gender-symbol female" aria-hidden="true">
                          ♀
                        </span>
                        Female
                      </button>
                    </div>
                    <small className="muted">Shown on the bird profile card as a symbol.</small>
                  </div>
                  <label>
                    DOB
                    <input
                      type="date"
                      value={birdForm.dateOfBirth}
                      onChange={(event) => setBirdForm({ ...birdForm, dateOfBirth: event.target.value })}
                    />
                  </label>
                  <label>
                    Gotcha day
                    <input
                      type="date"
                      value={birdForm.gotchaDay}
                      onChange={(event) => setBirdForm({ ...birdForm, gotchaDay: event.target.value })}
                    />
                  </label>
                  <label className="toggle-card">
                    <span>Notify on DOB</span>
                    <input
                      type="checkbox"
                      checked={birdForm.notifyOnDob}
                      onChange={(event) => setBirdForm({ ...birdForm, notifyOnDob: event.target.checked })}
                    />
                    <small className="muted">Send a reminder on this bird's birthday each year.</small>
                  </label>
                  <label className="toggle-card">
                    <span>Notify on gotcha day</span>
                    <input
                      type="checkbox"
                      checked={birdForm.notifyOnGotchaDay}
                      onChange={(event) => setBirdForm({ ...birdForm, notifyOnGotchaDay: event.target.checked })}
                    />
                    <small className="muted">Send a reminder on this bird's gotcha day anniversary.</small>
                  </label>
                  <label>
                    Graph color
                    <input type="color" value={birdForm.chartColor} onChange={(event) => setBirdForm({ ...birdForm, chartColor: event.target.value })} />
                  </label>
                  <div className="color-preview-card">
                    <span className="legend-swatch large-swatch" style={{ background: birdForm.chartColor }} />
                    <p className="muted">This color will follow this bird across the overview graph and its individual weight trend.</p>
                  </div>

                  <div className="photo-editor">
                    <div className="photo-preview-shell">
                      {photoCrop ? (
                        <div
                          className={`crop-preview-frame ${photoDrag ? 'dragging' : ''}`}
                          onPointerDown={handlePhotoCropPointerDown}
                          onPointerMove={handlePhotoCropPointerMove}
                          onPointerUp={handlePhotoCropPointerUp}
                          onPointerCancel={handlePhotoCropPointerUp}
                        >
                          <img
                            className="crop-preview-image"
                            src={photoCrop.sourceDataUrl}
                            alt="Crop preview"
                            style={{
                              width: `${getPhotoCropMetrics(photoCrop).displayWidth}px`,
                              height: `${getPhotoCropMetrics(photoCrop).displayHeight}px`,
                              left: `${getPhotoCropMetrics(photoCrop).left}px`,
                              top: `${getPhotoCropMetrics(photoCrop).top}px`,
                            }}
                          />
                          <div className="crop-preview-overlay" aria-hidden="true" />
                        </div>
                      ) : birdForm.photoDataUrl ? (
                        <img className="profile-photo" src={birdForm.photoDataUrl} alt="Bird preview" />
                      ) : (
                        <div className="profile-photo placeholder-avatar" aria-hidden="true">
                          {(birdForm.name || 'B').slice(0, 1).toUpperCase()}
                        </div>
                      )}
                    </div>
                    <div className="photo-copy">
                      <label className="file-picker">
                        Photo
                        <input accept="image/png,image/jpeg,image/jpg,image/webp,image/gif" onChange={handleBirdPhotoChange} type="file" />
                      </label>
                      <p className="muted">
                        {photoCrop
                          ? `${photoCrop.fileName} ready to crop. Adjust it below and save the crop.`
                          : birdPhotoName || (birdForm.photoDataUrl ? 'Current photo ready to save.' : 'Optional. Great for quick identification.')}
                      </p>
                      {photoCrop ? (
                        <div className="crop-control-stack">
                          <p className="muted">Drag the photo to position it inside the square crop. The saved image will match this preview.</p>
                          <label>
                            Zoom
                            <input
                              type="range"
                              min="1"
                              max="3"
                              step="0.01"
                              value={photoCrop.zoom}
                              onChange={(event) =>
                                setPhotoCrop((current) => (current ? { ...current, zoom: Number(event.target.value) } : current))
                              }
                            />
                          </label>
                          <div className="button-row">
                            <button className="primary-button" onClick={handleApplyPhotoCrop} type="button" disabled={applyingPhotoCrop}>
                              {applyingPhotoCrop ? 'Applying crop...' : 'Apply crop'}
                            </button>
                            <button className="secondary-button" onClick={handleCancelPhotoCrop} type="button" disabled={applyingPhotoCrop}>
                              Cancel
                            </button>
                          </div>
                          <p className="muted">Photos are cropped to a square and optimized automatically to stay within the current upload limit.</p>
                        </div>
                      ) : birdForm.photoDataUrl ? (
                        <button className="secondary-button" onClick={handleRemovePhoto} type="button">
                          Remove photo
                        </button>
                      ) : null}
                    </div>
                  </div>

                  <button className="primary-button" type="submit" disabled={savingBird}>
                    {savingBird ? 'Saving...' : editingBird ? 'Save profile changes' : 'Save bird profile'}
                  </button>
                </form>
              </>
            ) : null}
          </article>

          <article className="panel form-panel">
            <div className="panel-header">
              <div>
                <p className="eyebrow">Settings</p>
                <h2>Bird transfer prep</h2>
              </div>
              <button
                className="secondary-button"
                onClick={() =>
                  setExpandedSettingsSection((current) => (current === 'transfer' ? null : 'transfer'))
                }
                type="button"
                aria-expanded={expandedSettingsSection === 'transfer'}
              >
                {expandedSettingsSection === 'transfer' ? 'Close' : 'Open'}
              </button>
            </div>
            {expandedSettingsSection === 'transfer' ? (
              <>
                <p className="muted">
                  This is the first step toward rescue handoffs and owner-to-owner transfers. For now it captures the matching details we would
                  later use to safely move a bird record between accounts.
                </p>
                <form className="form-panel" onSubmit={handleMergeSubmit}>
                  <label>
                    Bird to transfer
                    <select
                      value={mergeForm.birdId}
                      onChange={(event) => setMergeForm({ ...mergeForm, birdId: event.target.value })}
                      required
                    >
                      <option value="">Select a bird from this flock</option>
                      {birds.map((bird) => (
                        <option key={bird.id} value={bird.id}>
                          {bird.name} • {bird.species} • Band {bird.tagId}
                        </option>
                      ))}
                    </select>
                  </label>
                  <label>
                    Destination owner email
                    <input
                      type="email"
                      value={mergeForm.destinationOwnerEmail}
                      onChange={(event) => setMergeForm({ ...mergeForm, destinationOwnerEmail: event.target.value })}
                      required
                    />
                  </label>
                  <label>
                    Transfer notes
                    <textarea
                      rows={4}
                      value={mergeForm.notes}
                      onChange={(event) => setMergeForm({ ...mergeForm, notes: event.target.value })}
                      placeholder="Optional context for rescue release, adoption, or household transfer"
                    />
                  </label>
                  <button className="primary-button" type="submit">
                    Save transfer draft
                  </button>
                </form>
              </>
            ) : null}
          </article>
          </section>
        ) : null}
      </section>

      {showWeightAlertModal ? (
        <div className="app-modal-backdrop" role="presentation" onClick={() => setShowWeightAlertModal(false)}>
          <section
            className="app-modal weight-alert-modal"
            role="dialog"
            aria-modal="true"
            aria-labelledby="weight-alert-title"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="panel-header">
              <div>
                <p className="eyebrow">Weight alert</p>
                <h2 id="weight-alert-title">Birds outside typical chart ranges</h2>
              </div>
              <button className="secondary-button" onClick={() => setShowWeightAlertModal(false)} type="button">
                Close
              </button>
            </div>
            <p className="muted">
              These alerts use the BirdSupplies species chart as a general reference. If a reading is unexpected or concerning, please consult your
              veterinarian.
            </p>
            <div className="modal-alert-list">
              {outOfRangeBirds.map(({ bird, assessment }) => (
                <article key={bird.id} className="summary-card summary-alert-card">
                  <strong>
                    {bird.name} is {assessment.status === 'below' ? 'below' : 'above'} the typical range
                  </strong>
                  <span>
                    {bird.species} • Latest weight {formatWeight(bird.latestWeightGrams)} • Typical range{' '}
                    {formatRange(assessment.reference.minGrams, assessment.reference.maxGrams)}
                  </span>
                </article>
              ))}
            </div>
          </section>
        </div>
      ) : null}
    </main>
  );
}

export default App;