# 05. Results Page with Disease Cards, Symptom Comparison, and Treatment Steps

meta:
  id: hyper-specific-plant-disease-id-05
  feature: hyper-specific-plant-disease-id
  priority: P1
  depends_on: [hyper-specific-plant-disease-id-04]
  tags: [frontend, results-page, ui]

objective:
- Build the main identification results page that displays ranked disease predictions as rich, actionable cards — each showing confidence, symptoms, cause, treatment steps, and lookalike comparisons.

deliverables:
- `app/results/[imageId]/page.tsx` — results page route (takes imageId from URL param)
- `components/ResultsDashboard.tsx` — top-level results layout: uploaded image preview + ranked prediction cards
- `components/DiseaseCard.tsx` — individual disease result card with expandable sections
- `components/ConfidenceBadge.tsx` — color-coded confidence indicator (green=high, amber=medium, red=low)
- `components/SymptomChecker.tsx` — visual symptom checklist with severity indicators
- `components/TreatmentTimeline.tsx` — ordered treatment steps with urgency tags
- `components/LookalikeWarning.tsx` — warning banner when lookalike diseases exist, with side-by-side comparison toggle
- `lib/api/identify.ts` — (already created in task 04, extend if needed)

steps:
1. Create `app/results/[imageId]/page.tsx`:
   - Server Component that fetches identification results via API (or accepts them as passed data from the upload flow).
   - Layout: side-by-side on desktop (image left, results right), stacked on mobile.
   - Loading skeleton state while results are computed.
   - Error state if identification fails.
   - Empty/unexpected state.
2. Build `components/ResultsDashboard.tsx`:
   - Top section: uploaded image thumbnail with metadata (imageId, upload time).
   - Sortable/dismissible list of `DiseaseCard` components.
   - Primary diagnosis highlighted with a prominent blue/green border.
   - Secondary alternatives shown with equal weight below.
3. Build `components/DiseaseCard.tsx`:
   - Collapsed state: disease name, confidence badge, causal agent type icon, one-sentence summary.
   - Expanded state: full description, symptom list (from `SymptomChecker`), cause list, treatment timeline, prevention tips.
   - Smooth expand/collapse animation.
   - "Was this helpful?" feedback buttons at the bottom (UI only, no backend).
4. Build `components/ConfidenceBadge.tsx`:
   - Pill-shaped badge: green background + checkmark for ≥0.8, amber + warning for ≥0.5, red + exclamation for <0.5.
   - Shows percentage (e.g., "87% confidence").
   - Hover tooltip explains confidence interpretation.
5. Build `components/SymptomChecker.tsx`:
   - For the predicted disease, show a list of common symptoms with checkboxes.
   - User can check which symptoms they observe on their plant.
   - A match counter shows "3 of 5 symptoms match".
   - Helps user confirm/reject the diagnosis.
6. Build `components/TreatmentTimeline.tsx`:
   - Ordered card showing immediate, short-term, and long-term treatment steps.
   - Each step has: action text, urgency badge (immediate/within week/ongoing), optional photo reference link.
   - "Treatments may vary" disclaimer at bottom.
7. Build `components/LookalikeWarning.tsx`:
   - Yellow banner: "This disease is easily confused with [lookalike name]."
   - Click to expand side-by-side symptom comparison table.
   - Comparison table columns: symptom, this disease, lookalike disease.
   - Links to lookalike disease detail.
8. Add `app/results/page.tsx` redirect — if someone navigates directly without an imageId, redirect to homepage.

tests:
- **Unit:** `ConfidenceBadge` renders correct color for high/medium/low thresholds.
- **Unit:** `DiseaseCard` expands and collapses on click.
- **Unit:** `SymptomChecker` counter updates when toggling checkboxes.
- **Integration:** Navigate to `/results/{valid-imageId}` → page renders with ≥1 disease card.
- **Integration:** Navigate to `/results/invalid-id` → shows error state.
- **Integration:** `LookalikeWarning` appears when prediction includes lookalike field.
- **Visual:** All components render correctly at 375px, 768px, and 1280px widths.

acceptance_criteria:
- Results page renders within 1 second after identification API responds.
- Primary diagnosis is visually distinguished from alternatives.
- Each disease card expands to show full symptoms, causes, and treatment.
- Symptom checker lets user confirm/reject diagnosis interactively.
- Lookalike warnings appear when applicable with side-by-side comparison.
- Confidence badges use correct colors and labels.
- Page works on mobile (stacked layout) and desktop (side-by-side).
- Loading skeleton and error states are handled.

validation:
- Upload a plant photo → results page loads with disease cards.
- Click "expand" on a disease card → symptoms, causes, treatment sections appear.
- Toggle symptom checkboxes → match counter updates.
- Lookalike warning shows for easily confused diseases.
- Resize browser to mobile width → layout stacks vertically.
- Navigate to `/results/unknown` → error message with "Try again" button.

notes:
- The results page receives the identification payload either via router params (server-rendered) or client-side fetch after upload.
- For Vercel deployment, prefer client-side fetch to avoid serverless function timeouts on long inference.
- All text content is server-rendered where possible for SEO on disease information pages.