'use client'

import { useState, useEffect, useCallback } from 'react'
import { useRouter } from 'next/navigation'
import { 
  ClipboardList, Plus, CheckCircle2, Circle, 
  Users, Clock, AlertCircle, ChevronRight 
} from 'lucide-react'

import { Card, Button, showToast } from '@/components/ui'
import { Header, PageContainer } from '@/components/layout/header'
import { useApp } from '../provider'

interface CareTask {
  id: string
  title: string
  description?: string
  assignedTo?: { id: string; name: string }
  dueAt?: string
  completedAt?: string
  completedBy?: { id: string; name: string }
  priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT'
  category: 'MEDICATION' | 'APPOINTMENT' | 'SYMPTOM' | 'GENERAL'
  createdAt: string
  createdBy: { id: string; name: string }
}

interface HandoffNote {
  id: string
  content: string
  category: 'GENERAL' | 'SYMPTOM' | 'MEDICATION' | 'MOOD'
  priority: 'LOW' | 'NORMAL' | 'HIGH'
  createdAt: string
  createdBy: { id: string; name: string }
  expiresAt: string
  acknowledgedBy: string[]
}

const PRIORITY_COLORS = {
  LOW: 'bg-blue-100 text-blue-700',
  MEDIUM: 'bg-yellow-100 text-yellow-700',
  HIGH: 'bg-orange-100 text-orange-700',
  URGENT: 'bg-red-100 text-red-700',
}

const CATEGORY_ICONS = {
  MEDICATION: '💊',
  APPOINTMENT: '📅',
  SYMPTOM: '😷',
  GENERAL: '📝',
}

export default function CareCoordinationPage() {
  const router = useRouter()
  const { currentWorkspace } = useApp()
  const [tasks, setTasks] = useState<CareTask[]>([])
  const [handoffNotes, setHandoffNotes] = useState<HandoffNote[]>([])
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState<'tasks' | 'notes'>('tasks')

  const fetchData = useCallback(async () => {
    try {
      const [tasksRes, notesRes] = await Promise.all([
        fetch(`/api/workspaces/${currentWorkspace.id}/care-tasks`),
        fetch(`/api/workspaces/${currentWorkspace.id}/handoff-notes`)
      ])

      if (tasksRes.ok) {
        const tasksData = await tasksRes.json()
        setTasks(tasksData.tasks)
      }
      if (notesRes.ok) {
        const notesData = await notesRes.json()
        setHandoffNotes(notesData.notes)
      }
    } catch (err) {
      console.error('Failed to fetch care data:', err)
    } finally {
      setLoading(false)
    }
  }, [currentWorkspace.id])

  useEffect(() => {
    fetchData()
  }, [fetchData])

  const handleCompleteTask = async (taskId: string) => {
    try {
      const response = await fetch(
        `/api/workspaces/${currentWorkspace.id}/care-tasks/${taskId}/complete`,
        { method: 'POST' }
      )
      if (!response.ok) throw new Error('Failed to complete task')
      
      showToast('Task completed!', 'success')
      fetchData()
    } catch {
      showToast('Failed to complete task', 'error')
    }
  }

  const handleAcknowledgeNote = async (noteId: string) => {
    try {
      await fetch(
        `/api/workspaces/${currentWorkspace.id}/handoff-notes/${noteId}/acknowledge`,
        { method: 'POST' }
      )
      fetchData()
    } catch {
      console.error('Failed to acknowledge note')
    }
  }

  // Separate active and completed tasks
  const activeTasks = tasks.filter(t => !t.completedAt)
  const completedTasks = tasks.filter(t => t.completedAt).slice(0, 5)

  // Filter unacknowledged notes
  const unacknowledgedNotes = handoffNotes.filter(
    n => !n.acknowledgedBy.includes(currentWorkspace.userId || '')
  )

  if (loading) {
    return (
      <>
        <Header title="Care Coordination" />
        <PageContainer>
          <div className="flex items-center justify-center h-64">
            <div className="animate-spin w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full" />
          </div>
        </PageContainer>
      </>
    )
  }

  return (
    <>
      <Header 
        title="Care Coordination"
        rightAction={{
          icon: <Plus className="w-6 h-6 text-secondary-700" />,
          label: 'Add',
          onClick: () => router.push('/care/new-task')
        }}
      />
      <PageContainer className="pt-4 space-y-6">
        {/* Tab Switcher */}
        <div className="flex bg-secondary-100 rounded-lg p-1">
          <button
            onClick={() => setActiveTab('tasks')}
            className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-sm font-medium transition-all ${
              activeTab === 'tasks'
                ? 'bg-white text-secondary-900 shadow-sm'
                : 'text-secondary-600 hover:text-secondary-900'
            }`}
          >
            <ClipboardList className="w-4 h-4" />
            Tasks ({activeTasks.length})
          </button>
          <button
            onClick={() => setActiveTab('notes')}
            className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-sm font-medium transition-all ${
              activeTab === 'notes'
                ? 'bg-white text-secondary-900 shadow-sm'
                : 'text-secondary-600 hover:text-secondary-900'
            }`}
          >
            <Users className="w-4 h-4" />
            Handoff
            {unacknowledgedNotes.length > 0 && (
              <span className="w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
                {unacknowledgedNotes.length}
              </span>
            )}
          </button>
        </div>

        {/* Tasks View */}
        {activeTab === 'tasks' && (
          <>
            {/* Active Tasks */}
            <section>
              <h2 className="text-lg font-semibold text-secondary-900 mb-3">
                Active Tasks
              </h2>
              {activeTasks.length === 0 ? (
                <Card variant="outline" className="text-center py-8">
                  <ClipboardList className="w-12 h-12 text-secondary-300 mx-auto mb-3" />
                  <p className="text-secondary-500">No active tasks</p>
                  <p className="text-sm text-secondary-400 mt-1">
                    Add tasks to coordinate care
                  </p>
                  {currentWorkspace.role !== 'VIEWER' && (
                    <Button 
                      href="/care/new-task" 
                      variant="secondary"
                      className="mt-4"
                    >
                      <Plus className="w-4 h-4 mr-1" />
                      Add Task
                    </Button>
                  )}
                </Card>
              ) : (
                <div className="space-y-3">
                  {activeTasks.map(task => (
                    <TaskCard
                      key={task.id}
                      task={task}
                      onComplete={() => handleCompleteTask(task.id)}
                      canComplete={currentWorkspace.role !== 'VIEWER'}
                    />
                  ))}
                </div>
              )}
            </section>

            {/* Recently Completed */}
            {completedTasks.length > 0 && (
              <section>
                <h2 className="text-lg font-semibold text-secondary-900 mb-3">
                  Recently Completed
                </h2>
                <div className="space-y-2">
                  {completedTasks.map(task => (
                    <div 
                      key={task.id}
                      className="p-3 bg-secondary-50 rounded-lg opacity-60"
                    >
                      <div className="flex items-center gap-3">
                        <CheckCircle2 className="w-5 h-5 text-green-500" />
                        <span className="flex-1 line-through text-secondary-500">
                          {task.title}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            )}
          </>
        )}

        {/* Handoff Notes View */}
        {activeTab === 'notes' && (
          <>
            {/* Quick Add Note */}
            {currentWorkspace.role !== 'VIEWER' && (
              <Card className="bg-amber-50 border-amber-200">
                <h3 className="font-medium text-amber-900 mb-2">Quick Handoff Note</h3>
                <p className="text-sm text-amber-700 mb-3">
                  Leave a note for other caregivers about symptoms, observations, or important updates.
                </p>
                <Button 
                  href="/care/new-note"
                  variant="secondary"
                  fullWidth
                >
                  Write Note
                </Button>
              </Card>
            )}

            {/* Unacknowledged Notes */}
            {unacknowledgedNotes.length > 0 && (
              <section>
                <h2 className="text-lg font-semibold text-secondary-900 mb-3 flex items-center">
                  <AlertCircle className="w-5 h-5 mr-2 text-amber-500" />
                  New for You
                </h2>
                <div className="space-y-3">
                  {unacknowledgedNotes.map(note => (
                    <HandoffNoteCard
                      key={note.id}
                      note={note}
                      isNew={true}
                      onAcknowledge={() => handleAcknowledgeNote(note.id)}
                    />
                  ))}
                </div>
              </section>
            )}

            {/* All Notes */}
            <section>
              <h2 className="text-lg font-semibold text-secondary-900 mb-3">
                Recent Notes
              </h2>
              {handoffNotes.length === 0 ? (
                <Card variant="outline" className="text-center py-8">
                  <Users className="w-12 h-12 text-secondary-300 mx-auto mb-3" />
                  <p className="text-secondary-500">No handoff notes</p>
                  <p className="text-sm text-secondary-400 mt-1">
                    Notes help coordinate care between family members
                  </p>
                </Card>
              ) : (
                <div className="space-y-3">
                  {handoffNotes.slice(0, 10).map(note => (
                    <HandoffNoteCard
                      key={note.id}
                      note={note}
                      isNew={false}
                    />
                  ))}
                </div>
              )}
            </section>
          </>
        )}
      </PageContainer>
    </>
  )
}

interface TaskCardProps {
  task: CareTask
  onComplete: () => void
  canComplete: boolean
}

function TaskCard({ task, onComplete, canComplete }: TaskCardProps) {
  const isOverdue = task.dueAt && new Date(task.dueAt) < new Date() && !task.completedAt

  return (
    <Card className={isOverdue ? 'border-red-300' : ''}>
      <div className="flex items-start gap-3">
        {canComplete ? (
          <button
            onClick={onComplete}
            className="mt-0.5 w-6 h-6 rounded-full border-2 border-primary-500 flex items-center justify-center hover:bg-primary-50"
          >
            <Circle className="w-4 h-4 text-primary-500" />
          </button>
        ) : (
          <Circle className="w-6 h-6 text-secondary-300 mt-0.5" />
        )}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-lg">{CATEGORY_ICONS[task.category]}</span>
            <h3 className={`font-medium ${task.completedAt ? 'line-through text-secondary-500' : 'text-secondary-900'}`}>
              {task.title}
            </h3>
            <span className={`text-xs px-2 py-0.5 rounded-full ${PRIORITY_COLORS[task.priority]}`}>
              {task.priority}
            </span>
          </div>
          {task.description && (
            <p className="text-sm text-secondary-600 mt-1">{task.description}</p>
          )}
          <div className="flex items-center gap-4 mt-2 text-xs text-secondary-500">
            {task.assignedTo && (
              <span className="flex items-center gap-1">
                <Users className="w-3 h-3" />
                {task.assignedTo.name}
              </span>
            )}
            {task.dueAt && (
              <span className={`flex items-center gap-1 ${isOverdue ? 'text-red-600 font-medium' : ''}`}>
                <Clock className="w-3 h-3" />
                {isOverdue ? 'Overdue: ' : 'Due: '}
                {new Date(task.dueAt).toLocaleDateString()}
              </span>
            )}
          </div>
        </div>
      </div>
    </Card>
  )
}

interface HandoffNoteCardProps {
  note: HandoffNote
  isNew: boolean
  onAcknowledge?: () => void
}

function HandoffNoteCard({ note, isNew, onAcknowledge }: HandoffNoteCardProps) {
  const CATEGORY_COLORS = {
    GENERAL: 'bg-blue-50 border-blue-200',
    SYMPTOM: 'bg-red-50 border-red-200',
    MEDICATION: 'bg-green-50 border-green-200',
    MOOD: 'bg-purple-50 border-purple-200',
  }

  const PRIORITY_BADGES = {
    LOW: '',
    NORMAL: '',
    HIGH: '🔴 High Priority',
  }

  return (
    <Card className={`${CATEGORY_COLORS[note.category]} ${isNew ? 'ring-2 ring-amber-400' : ''}`}>
      <div className="flex items-start gap-3">
        <div className="flex-1">
          {note.priority === 'HIGH' && (
            <span className="text-xs font-medium text-red-600 mb-1 block">
              {PRIORITY_BADGES[note.priority]}
            </span>
          )}
          <p className="text-secondary-900 whitespace-pre-wrap">{note.content}</p>
          <div className="flex items-center justify-between mt-3">
            <span className="text-xs text-secondary-500">
              {note.createdBy.name} • {new Date(note.createdAt).toLocaleDateString()}
            </span>
            {isNew && onAcknowledge && (
              <Button 
                size="sm" 
                variant="secondary"
                onClick={onAcknowledge}
              >
                <CheckCircle2 className="w-4 h-4 mr-1" />
                Got it
              </Button>
            )}
          </div>
        </div>
      </div>
    </Card>
  )
}