Medical History Timeline Tool | WellAlly

// Timeline event structure
interface TimelineEvent {
  id: string
  eventType: 'symptom_onset' | 'diagnosis' | 'treatment_start' | 'treatment_end' |
              'hospitalization' | 'surgery' | 'procedure' | 'lab_result' | 'life_event'
  date: Date
  datePrecision: 'exact' | 'approximate' | 'month' | 'year' | 'era'
  category: 'physical' | 'mental' | 'diagnostic' | 'treatment' | 'administrative' | 'life'
  primaryDescription: string
  details: {
    provider?: string
    facility?: string
    diagnosis?: string
    symptoms?: string[]
    treatment?: string
    outcome?: string
    complications?: string[]
  }
  severity?: 'mild' | 'moderate' | 'severe'
  impact?: number // 1-10 scale of life impact
  relatedEvents: string[] // IDs of related events
  source: 'patient_reported' | 'medical_record' | 'lab_report' | 'prescription_record'
  confidence: 'confirmed' | 'likely' | 'uncertain'
  notes?: string
}

// Example entries
{
  eventType: 'symptom_onset',
  date: new Date('2023-03-15'),
  datePrecision: 'exact',
  category: 'physical',
  primaryDescription: 'Joint pain in hands and wrists',
  details: {
    symptoms: ['Morning stiffness', 'Grip weakness', 'Symmetrical pain'],
    provider: null
  },
  severity: 'moderate',
  impact: 6,
  relatedEvents: [],
  source: 'patient_reported',
  confidence: 'confirmed'
}

{
  eventType: 'treatment_start',
  date: new Date('2023-08-01'),
  datePrecision: 'exact',
  category: 'treatment',
  primaryDescription: 'Started methotrexate for RA',
  details: {
    provider: 'Dr. Sarah Johnson, Rheumatology',
    treatment: 'Methotrexate 15mg weekly',
    diagnosis: 'Rheumatoid Arthritis'
  },
  severity: 'moderate',
  relatedEvents: ['diagnosis-2023-06-15'],
  source: 'medical_record',
  confidence: 'confirmed'
}

// app/med-history-timeline/page.tsx
'use client'

import { useState, useMemo } from 'react'
import { TimelineVisualization } from '@/components/timeline/visualization'
import { EventEntry } from '@/components/timeline/event-entry'
import { PatternAnalysis } from '@/components/timeline/pattern-analysis'
import { ClinicalSummary } from '@/components/timeline/clinical-summary'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface TimelineEvent {
  id: string
  eventType: string
  date: Date
  description: string
  category: string
  severity?: string
  relatedEvents: string[]
}

export default function MedHistoryTimelinePage() {
  const [events, setEvents] = useState<TimelineEvent[]>([])
  const [view, setView] = useState<'entry' | 'timeline' | 'patterns' | 'summary'>('entry')
  const [selectedCategory, setSelectedCategory] = useState<string>('all')

  // Filter events by category
  const filteredEvents = useMemo(() => {
    if (selectedCategory === 'all') return events
    return events.filter(event => event.category === selectedCategory)
  }, [events, selectedCategory])

  // Calculate statistics
  const stats = useMemo(() => {
    const byCategory = events.reduce((acc, event) => {
      acc[event.category] = (acc[event.category] || 0) + 1
      return acc
    }, {} as Record<string, number>)

    const byYear = events.reduce((acc, event) => {
      const year = new Date(event.date).getFullYear()
      acc[year] = (acc[year] || 0) + 1
      return acc
    }, {} as Record<number, number>)

    return { byCategory, byYear, totalEvents: events.length }
  }, [events])

  const handleAddEvent = (event: TimelineEvent) => {
    setEvents([...events, { ...event, id: Date.now().toString() }])
  }

  const handleEditEvent = (id: string, updatedEvent: Partial<TimelineEvent>) => {
    setEvents(events.map(e => e.id === id ? { ...e, ...updatedEvent } : e))
  }

  const handleDeleteEvent = (id: string) => {
    setEvents(events.filter(e => e.id !== id))
  }

  return (
    <div className="container mx-auto px-4 py-8 max-w-7xl">
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">
          Your Medical History Timeline
        </h1>
        <p className="text-gray-600">
          Build a visual narrative of your health journey to reveal patterns and connections
        </p>
      </div>

      {/* Statistics Summary */}
      {events.length > 0 && (
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-gray-600">Total Events</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">{stats.totalEvents}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-gray-600">Categories</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">{Object.keys(stats.byCategory).length}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-gray-600">Time Span</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">
                {Math.max(...Object.keys(stats.byYear).map(Number)) -
                 Math.min(...Object.keys(stats.byYear).map(Number))} years
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-gray-600">Patterns Found</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold">
                {Math.floor(stats.totalEvents / 15)}
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      {/* View Toggle */}
      <div className="flex gap-2 mb-6 overflow-x-auto">
        <Button
          variant={view === 'entry' ? 'default' : 'outline'}
          onClick={() => setView('entry')}
        >
          Add Events
        </Button>
        <Button
          variant={view === 'timeline' ? 'default' : 'outline'}
          onClick={() => setView('timeline')}
          disabled={events.length === 0}
        >
          View Timeline
        </Button>
        <Button
          variant={view === 'patterns' ? 'default' : 'outline'}
          onClick={() => setView('patterns')}
          disabled={events.length ＜ 10}
        >
          Pattern Analysis
        </Button>
        <Button
          variant={view === 'summary' ? 'default' : 'outline'}
          onClick={() => setView('summary')}
          disabled={events.length === 0}
        >
          Clinical Summary
        </Button>
      </div>

      {/* Category Filter */}
      {view !== 'entry' && events.length > 0 && (
        <div className="flex gap-2 mb-6">
          {['all', 'symptoms', 'diagnoses', 'treatments', 'procedures', 'life_events'].map(category => (
            <button
              key={category}
              onClick={() => setSelectedCategory(category)}
              className={`px-3 py-1 rounded-full text-sm ${
                selectedCategory === category
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-700'
              }`}
            >
              {category.replace('_', ' ')}
            </button>
          ))}
        </div>
      )}

      {/* View Content */}
      {view === 'entry' && (
        <EventEntry
          events={events}
          onAddEvent={handleAddEvent}
          onEditEvent={handleEditEvent}
          onDeleteEvent={handleDeleteEvent}
        />
      )}

      {view === 'timeline' && (
        <TimelineVisualization
          events={filteredEvents}
          onEditEvent={handleEditEvent}
          onDeleteEvent={handleDeleteEvent}
        />
      )}

      {view === 'patterns' && (
        <PatternAnalysis events={filteredEvents} />
      )}

      {view === 'summary' && (
        <ClinicalSummary events={filteredEvents} />
      )}
    </div>
  )
}

// components/timeline/visualization.tsx
'use client'

import { useMemo } from 'react'
import { format } from 'date-fns'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

interface TimelineVisualizationProps {
  events: TimelineEvent[]
  onEditEvent?: (id: string) => void
  onDeleteEvent?: (id: string) => void
}

const categoryColors = {
  symptoms: 'bg-yellow-100 border-yellow-300 text-yellow-800',
  diagnoses: 'bg-red-100 border-red-300 text-red-800',
  treatments: 'bg-blue-100 border-blue-300 text-blue-800',
  procedures: 'bg-purple-100 border-purple-300 text-purple-800',
  life_events: 'bg-green-100 border-green-300 text-green-800',
  lab_results: 'bg-gray-100 border-gray-300 text-gray-800'
}

const categoryIcons = {
  symptoms: '',
  diagnoses: '',
  treatments: '',
  procedures: '',
  life_events: '',
  lab_results: ''
}

export function TimelineVisualization({
  events,
  onEditEvent,
  onDeleteEvent
}: TimelineVisualizationProps) {
  // Group events by year
  const eventsByYear = useMemo(() => {
    const grouped = events.reduce((acc, event) => {
      const year = new Date(event.date).getFullYear()
      if (!acc[year]) acc[year] = []
      acc[year].push(event)
      return acc
    }, {} as Record<number, typeof events>)

    // Sort years in descending order (newest first)
    return Object.entries(grouped)
      .sort(([a], [b]) => Number(b) - Number(a))
      .reduce((acc, [year, events]) => {
        acc[Number(year)] = events.sort((a, b) =>
          new Date(b.date).getTime() - new Date(a.date).getTime()
        )
        return acc
      }, {} as Record<number, typeof events>)
  }, [events])

  // Find related events for connections
  const getRelatedEvents = (eventId: string) => {
    const event = events.find(e => e.id === eventId)
    if (!event || !event.relatedEvents) return []
    return event.relatedEvents
      .map(id => events.find(e => e.id === id))
      .filter(Boolean) as typeof events
  }

  return (
    <div className="space-y-8">
      {/* Timeline */}
      <div className="relative">
        {/* Vertical line */}
        <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-gray-200" />

        {Object.entries(eventsByYear).map(([year, yearEvents]) => (
          <div key={year} className="relative mb-8">
            {/* Year marker */}
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center z-10">
                <span className="text-white font-bold">{year.slice(-2)}</span>
              </div>
              <div className="ml-4">
                <h3 className="text-xl font-bold">{year}</h3>
                <p className="text-sm text-gray-600">{yearEvents.length} event{yearEvents.length > 1 ? 's' : ''}</p>
              </div>
            </div>

            {/* Events for this year */}
            <div className="ml-12 space-y-3">
              {yearEvents.map((event, index) => (
                <Card
                  key={event.id}
                  className={`relative ${categoryColors[event.category as keyof typeof categoryColors] || 'bg-white'}`}
                >
                  {/* Connector dot */}
                  <div className="absolute -left-8 top-4 w-3 h-3 rounded-full bg-blue-600 border-2 border-white" />

                  <CardContent className="p-4">
                    <div className="flex justify-between items-start">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="text-lg">
                            {categoryIcons[event.category as keyof typeof categoryIcons] || ''}
                          </span>
                          <Badge variant="outline" className="text-xs">
                            {event.category.replace('_', ' ')}
                          </Badge>
                          <span className="text-sm text-gray-600">
                            {format(new Date(event.date), 'MMM d')}
                          </span>
                          {event.severity && (
                            <Badge
                              variant="outline"
                              className={
                                event.severity === 'severe' ? 'bg-red-100 text-red-800' :
                                event.severity === 'moderate' ? 'bg-yellow-100 text-yellow-800' :
                                'bg-green-100 text-green-800'
                              }
                            >
                              {event.severity}
                            </Badge>
                          )}
                        </div>
                        <h4 className="font-semibold">{event.description}</h4>
                        {event.relatedEvents && event.relatedEvents.length > 0 && (
                          <div className="mt-2 text-sm text-gray-600">
                            Related: {event.relatedEvents.length} event{event.relatedEvents.length > 1 ? 's' : ''}
                          </div>
                        )}
                      </div>
                      <div className="flex gap-2">
                        {onEditEvent && (
                          <button
                            onClick={() => onEditEvent(event.id)}
                            className="text-blue-600 hover:text-blue-800 text-sm"
                          >
                            Edit
                          </button>
                        )}
                        {onDeleteEvent && (
                          <button
                            onClick={() => onDeleteEvent(event.id)}
                            className="text-red-600 hover:text-red-800 text-sm"
                          >
                            Delete
                          </button>
                        )}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Pattern indicators */}
      {events.length >= 10 && (
        <Card className="bg-blue-50 border-blue-200">
          <CardContent className="p-4">
            <h4 className="font-semibold mb-2">Patterns Detected</h4>
            <ul className="space-y-1 text-sm">
              <li>
                Most active period: {Object.entries(eventsByYear)
                  .sort(([, a], [, b]) => b.length - a.length)[0]?.[0]} (
                  {Object.values(eventsByYear).sort((a, b) => b.length - a.length)[0]?.length} events)
              </li>
              <li>
                Most common category: {
                  Object.entries(
                    events.reduce((acc, e) => {
                      acc[e.category] = (acc[e.category] || 0) + 1
                      return acc
                    }, {} as Record<string, number>)
                  ).sort(([, a], [, b]) => b - a)[0]?.[0].replace('_', ' ')
                }
              </li>
              <li>
                Average events per year: {Math.round(events.length / Object.keys(eventsByYear).length)}
              </li>
            </ul>
          </CardContent>
        </Card>
      )}
    </div>
  )
}

// components/timeline/pattern-analysis.tsx
'use client'

import { useMemo } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { format, differenceInMonths, differenceInYears } from 'date-fns'

interface PatternAnalysisProps {
  events: TimelineEvent[]
}

interface Pattern {
  type: string
  description: string
  confidence: 'high' | 'medium' | 'low'
  events: string[]
  clinicalSignificance?: string
}

export function PatternAnalysis({ events }: PatternAnalysisProps) {
  const patterns = useMemo(() => {
    const detectedPatterns: Pattern[] = []

    // Sort events by date
    const sortedEvents = [...events].sort((a, b) =>
      new Date(a.date).getTime() - new Date(b.date).getTime()
    )

    // Pattern 1: Clustering of events (periods of high activity)
    const eventClusters = findEventClusters(sortedEvents)
    eventClusters.forEach(cluster => {
      if (cluster.length >= 3) {
        detectedPatterns.push({
          type: 'Event Clustering',
          description: `Period of high healthcare activity between ${
            format(new Date(cluster[0].date), 'MMM yyyy')
          } and ${format(new Date(cluster[cluster.length - 1].date), 'MMM yyyy')}`,
          confidence: 'high',
          events: cluster.map(e => e.id),
          clinicalSignificance: 'May indicate acute episode, diagnostic odyssey, or treatment intensification'
        })
      }
    })

    // Pattern 2: Seasonal patterns
    const seasonalPatterns = findSeasonalPatterns(sortedEvents)
    seasonalPatterns.forEach(pattern => {
      detectedPatterns.push({
        type: 'Seasonal Pattern',
        description: pattern.description,
        confidence: pattern.confidence,
        events: pattern.events,
        clinicalSignificance: 'Possible seasonal triggers (allergies, weather, light exposure)'
      })
    })

    // Pattern 3: Treatment changes correlating with symptom changes
    const treatmentCorrelations = findTreatmentSymptomCorrelations(sortedEvents)
    treatmentCorrelations.forEach(correlation => {
      detectedPatterns.push({
        type: 'Treatment Response Pattern',
        description: correlation.description,
        confidence: correlation.confidence,
        events: correlation.events,
        clinicalSignificance: correlation.significance
      })
    })

    // Pattern 4: Diagnostic progression
    const diagnosticProgression = findDiagnosticProgression(sortedEvents)
    if (diagnosticProgression) {
      detectedPatterns.push({
        type: 'Diagnostic Progression',
        description: diagnosticProgression.description,
        confidence: diagnosticProgression.confidence,
        events: diagnosticProgression.events,
        clinicalSignificance: 'Evolution of understanding; may indicate condition complexity'
      })
    }

    return detectedPatterns
  }, [events])

  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold">Pattern Analysis</h2>
      <p className="text-gray-600">
        Analyzing {events.length} events for temporal patterns and correlations
      </p>

      {patterns.length === 0 ? (
        <Card>
          <CardContent className="p-6 text-center text-gray-500">
            Not enough events to detect patterns. Continue adding to your timeline.
          </CardContent>
        </Card>
      ) : (
        patterns.map((pattern, index) => (
          <Card key={index} className="border-l-4 border-l-blue-500">
            <CardHeader>
              <div className="flex justify-between items-start">
                <CardTitle className="text-lg">{pattern.type}</CardTitle>
                <Badge
                  variant={
                    pattern.confidence === 'high' ? 'default' :
                    pattern.confidence === 'medium' ? 'secondary' : 'outline'
                  }
                >
                  {pattern.confidence} confidence
                </Badge>
              </div>
            </CardHeader>
            <CardContent>
              <p className="mb-3">{pattern.description}</p>
              {pattern.clinicalSignificance && (
                <div className="bg-blue-50 p-3 rounded-lg mb-3">
                  <p className="text-sm text-blue-800">
                    <strong>Clinical significance:</strong> {pattern.clinicalSignificance}
                  </p>
                </div>
              )}
              <div className="text-sm text-gray-600">
                Based on {pattern.events.length} event{pattern.events.length > 1 ? 's' : ''}
              </div>
            </CardContent>
          </Card>
        ))
      )}

      {/* Questions for providers based on patterns */}
      {patterns.length > 0 && (
        <Card className="bg-green-50 border-green-200">
          <CardHeader>
            <CardTitle className="text-lg">Questions for Your Provider</CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start">
                <span className="text-green-600 mr-2">•</span>
                <span>I've noticed patterns in my health history. Could you review my timeline?</span>
              </li>
              <li className="flex items-start">
                <span className="text-green-600 mr-2">•</span>
                <span>Do these temporal correlations suggest anything about my condition?</span>
              </li>
              <li className="flex items-start">
                <span className="text-green-600 mr-2">•</span>
                <span>Should we investigate the triggers I've identified?</span>
              </li>
              <li className="flex items-start">
                <span className="text-green-600 mr-2">•</span>
                <span>Could my treatment history guide future therapy decisions?</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      )}
    </div>
  )
}

// Helper functions for pattern detection
function findEventClusters(events: TimelineEvent[]): TimelineEvent[][] {
  const clusters: TimelineEvent[][] = []
  const clusterThresholdMonths = 6

  if (events.length ＜ 3) return clusters

  for (let i = 0; i < events.length - 2; i++) {
    const cluster = [events[i]]
    let j = i + 1

    while (j < events.length) {
      const monthsDiff = differenceInMonths(
        new Date(events[j].date),
        new Date(cluster[cluster.length - 1].date)
      )

      if (monthsDiff <= clusterThresholdMonths) {
        cluster.push(events[j])
        j++
      } else {
        break
      }
    }

    if (cluster.length >= 3) {
      clusters.push(cluster)
      i = j - 1
    }
  }

  return clusters
}

function findSeasonalPatterns(events: TimelineEvent[]): Array<{
  description: string
  confidence: 'high' | 'medium' | 'low'
  events: string[]
}> {
  const patterns: Array<{ description: string; confidence: 'high' | 'medium' | 'low'; events: string[] }> = []

  // Group events by month
  const eventsByMonth = events.reduce((acc, event) => {
    const month = format(new Date(event.date), 'MMMM')
    if (!acc[month]) acc[month] = []
    acc[month].push(event)
    return acc
  }, {} as Record<string, typeof events>)

  // Check for significant clustering in certain months
  Object.entries(eventsByMonth).forEach(([month, monthEvents]) => {
    if (monthEvents.length >= 3) {
      patterns.push({
        description: `Events cluster in ${month}`,
        confidence: monthEvents.length >= 4 ? 'high' : 'medium',
        events: monthEvents.map(e => e.id)
      })
    }
  })

  return patterns
}

function findTreatmentSymptomCorrelations(events: TimelineEvent[]): Array<{
  description: string
  confidence: 'high' | 'medium' | 'low'
  events: string[]
  significance: string
}> {
  const correlations: Array<{ description: string; confidence: 'high' | 'medium' | 'low'; events: string[]; significance: string }> = []

  const treatments = events.filter(e => e.category === 'treatments' || e.eventType.includes('treatment'))
  const symptoms = events.filter(e => e.category === 'symptoms' || e.eventType.includes('symptom'))

  treatments.forEach(treatment => {
    // Find symptoms within 3 months after treatment start
    const relatedSymptoms = symptoms.filter(symptom => {
      const monthsDiff = differenceInMonths(
        new Date(symptom.date),
        new Date(treatment.date)
      )
      return monthsDiff >= 0 && monthsDiff <= 3
    })

    if (relatedSymptoms.length > 0) {
      correlations.push({
        description: `Symptom changes following ${treatment.description.slice(0, 50)}...`,
        confidence: relatedSymptoms.length >= 2 ? 'high' : 'medium',
        events: [treatment.id, ...relatedSymptoms.map(s => s.id)],
        significance: relatedSymptoms.some(s => s.severity === 'severe')
          ? 'Possible adverse reaction requiring review'
          : 'Treatment response pattern to discuss with provider'
      })
    }
  })

  return correlations
}

function findDiagnosticProgression(events: TimelineEvent[]): {
  description: string
  confidence: 'high' | 'medium' | 'low'
  events: string[]
} | null {
  const diagnoses = events.filter(e => e.category === 'diagnoses' || e.eventType.includes('diagnosis'))

  if (diagnoses.length ＜ 2) return null

  return {
    description: `Diagnostic evolution across ${diagnoses.length} diagnoses`,
    confidence: diagnoses.length >= 3 ? 'high' : 'medium',
    events: diagnoses.map(d => d.id)
  }
}