"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { RichTextEditor } from "./rich-text-editor"
import { FormNavigation } from "./form-navigation"
import { User, Activity, ClipboardList, Heart, FileText } from "lucide-react"

export function ProgressNotesForm() {
  const [activeSection, setActiveSection] = useState("basic-info")
  const [formData, setFormData] = useState({
    basicInfo: "",
    vitals: "",
    assessment: "",
    plan: "",
    notes: "",
  })

  const sections = [
    { id: "basic-info", label: "Basic Info", icon: <User className="w-4 h-4" /> },
    { id: "vitals", label: "Vitals", icon: <Activity className="w-4 h-4" /> },
    { id: "assessment", label: "Assessment", icon: <ClipboardList className="w-4 h-4" /> },
    { id: "plan", label: "Plan", icon: <Heart className="w-4 h-4" /> },
    { id: "notes", label: "Notes", icon: <FileText className="w-4 h-4" /> },
  ]

  useEffect(() => {
    const handleScroll = () => {
      const sectionElements = sections.map((section) => ({
        id: section.id,
        element: document.getElementById(section.id),
      }))

      const currentSection = sectionElements.find(({ element }) => {
        if (!element) return false
        const rect = element.getBoundingClientRect()
        return rect.top <= 100 && rect.bottom >= 100
      })

      if (currentSection) {
        setActiveSection(currentSection.id)
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  const updateFormData = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

  return (
    <div className="relative">
      <FormNavigation sections={sections} activeSection={activeSection} onSectionChange={setActiveSection} />

      <div className="max-w-4xl mx-auto space-y-6 pl-0 md:pl-16">
        {/* Basic Info Section */}
        <Card id="basic-info" className="scroll-mt-20">
          <CardHeader className="bg-blue-50 border-b">
            <CardTitle className="flex items-center gap-2 text-blue-800">
              <User className="w-5 h-5" />
              Basic Information
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <Label htmlFor="date">Date</Label>
                <Input id="date" type="date" />
              </div>
              <div>
                <Label htmlFor="time">Time</Label>
                <Input id="time" type="time" />
              </div>
              <div>
                <Label htmlFor="day-post-op">Day Post-Op</Label>
                <Input id="day-post-op" placeholder="e.g., POD #3" />
              </div>
            </div>
            <div>
              <Label htmlFor="subjective">Subjective (Patient's Complaints)</Label>
              <RichTextEditor
                value={formData.basicInfo}
                onChange={(value) => updateFormData("basicInfo", value)}
                placeholder="Patient's subjective complaints and symptoms..."
                fieldType="chief-complaints"
                showAutofill={true}
                autofillSource="Patient Interview"
                autofillTimestamp="2024-01-15, 10:30 AM"
              />
            </div>
          </CardContent>
        </Card>

        {/* Vitals Section */}
        <Card id="vitals" className="scroll-mt-20">
          <CardHeader className="bg-green-50 border-b">
            <CardTitle className="flex items-center gap-2 text-green-800">
              <Activity className="w-5 h-5" />
              Vital Signs & Objective Findings
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div>
                <Label htmlFor="bp">Blood Pressure</Label>
                <Input id="bp" placeholder="120/80" />
              </div>
              <div>
                <Label htmlFor="pulse">Pulse</Label>
                <Input id="pulse" placeholder="72 bpm" />
              </div>
              <div>
                <Label htmlFor="temp">Temperature</Label>
                <Input id="temp" placeholder="98.6°F" />
              </div>
              <div>
                <Label htmlFor="resp">Respiratory Rate</Label>
                <Input id="resp" placeholder="16/min" />
              </div>
            </div>
            <div>
              <Label htmlFor="objective">Objective Findings</Label>
              <RichTextEditor
                value={formData.vitals}
                onChange={(value) => updateFormData("vitals", value)}
                placeholder="Physical examination findings, lab results, imaging..."
                fieldType="assessment"
                rows={5}
                showAutofill={true}
                autofillSource="Nursing Station"
                autofillTimestamp="2024-01-15, 11:00 AM"
              />
            </div>
          </CardContent>
        </Card>

        {/* Assessment Section */}
        <Card id="assessment" className="scroll-mt-20">
          <CardHeader className="bg-red-50 border-b">
            <CardTitle className="flex items-center gap-2 text-red-800">
              <ClipboardList className="w-5 h-5" />
              Assessment
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div>
              <Label htmlFor="clinical-assessment">Clinical Assessment</Label>
              <RichTextEditor
                value={formData.assessment}
                onChange={(value) => updateFormData("assessment", value)}
                placeholder="Current clinical status, progress, complications..."
                fieldType="assessment"
                rows={6}
              />
            </div>
          </CardContent>
        </Card>

        {/* Plan Section */}
        <Card id="plan" className="scroll-mt-20">
          <CardHeader className="bg-indigo-50 border-b">
            <CardTitle className="flex items-center gap-2 text-indigo-800">
              <Heart className="w-5 h-5" />
              Plan
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div>
              <Label htmlFor="treatment-plan">Treatment Plan</Label>
              <RichTextEditor
                value={formData.plan}
                onChange={(value) => updateFormData("plan", value)}
                placeholder="Treatment modifications, new orders, discharge planning..."
                fieldType="plan"
                rows={6}
              />
            </div>
          </CardContent>
        </Card>

        {/* Additional Notes Section */}
        <Card id="notes" className="scroll-mt-20">
          <CardHeader className="bg-gray-50 border-b">
            <CardTitle className="flex items-center gap-2 text-gray-800">
              <FileText className="w-5 h-5" />
              Additional Notes
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div>
              <Label htmlFor="additional-notes">Additional Notes</Label>
              <RichTextEditor
                value={formData.notes}
                onChange={(value) => updateFormData("notes", value)}
                placeholder="Any additional observations, communications, or instructions..."
                fieldType="general"
                rows={4}
              />
            </div>
          </CardContent>
        </Card>

        {/* Form Actions */}
        <div className="flex justify-end gap-4 py-6">
          <Button variant="outline">Save Draft</Button>
          <Button variant="outline">Print</Button>
          <Button>Submit Progress Note</Button>
        </div>
      </div>
    </div>
  )
}