"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RichTextEditor } from "./rich-text-editor"
import { Plus, Calendar, Sun, Sunset, Moon, Clock } from "lucide-react"

interface ProgressNotesProps {
  patient: any
}

export function ProgressNotes({ patient }: ProgressNotesProps) {
  const [showAddNote, setShowAddNote] = useState(false)
  const [currentDate, setCurrentDate] = useState(new Date().toISOString().split("T")[0])

  const [morningShift, setMorningShift] = useState({
    complaints: "",
    findings: "",
    vitals: "",
    events: "",
    doctor: "",
  })

  const [eveningShift, setEveningShift] = useState({
    complaints: "",
    findings: "",
    vitals: "",
    events: "",
    doctor: "",
  })

  const [nightShift, setNightShift] = useState({
    complaints: "",
    findings: "",
    vitals: "",
    events: "",
    doctor: "",
  })

  const handleShiftChange = (shift: string, field: string, value: string) => {
    if (shift === "morning") {
      setMorningShift((prev) => ({ ...prev, [field]: value }))
    } else if (shift === "evening") {
      setEveningShift((prev) => ({ ...prev, [field]: value }))
    } else if (shift === "night") {
      setNightShift((prev) => ({ ...prev, [field]: value }))
    }
  }

  const ShiftCard = ({
    title,
    icon: Icon,
    bgColor,
    shift,
    shiftData,
  }: {
    title: string
    icon: any
    bgColor: string
    shift: string
    shiftData: any
  }) => (
    <Card className={`${bgColor} border-2`}>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Icon className="w-5 h-5" />
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label className="text-sm font-medium">Chief Complaints</Label>
          <RichTextEditor
            value={shiftData.complaints}
            onChange={(value) => handleShiftChange(shift, "complaints", value)}
            placeholder="Enter chief complaints for this shift..."
            rows={2}
            fieldType="chief-complaints"
          />
        </div>

        <div>
          <Label className="text-sm font-medium">Findings (Systemic examination)</Label>
          <RichTextEditor
            value={shiftData.findings}
            onChange={(value) => handleShiftChange(shift, "findings", value)}
            placeholder="Enter examination findings..."
            rows={3}
            fieldType="assessment"
          />
        </div>

        <div>
          <Label className="text-sm font-medium">Vital Parameters</Label>
          <RichTextEditor
            value={shiftData.vitals}
            onChange={(value) => handleShiftChange(shift, "vitals", value)}
            placeholder="BP: 120/80, Pulse: 72, Temp: 98.6°F, RR: 16"
            rows={2}
            fieldType="general"
          />
        </div>

        <div>
          <Label className="text-sm font-medium">Specific Event</Label>
          <RichTextEditor
            value={shiftData.events}
            onChange={(value) => handleShiftChange(shift, "events", value)}
            placeholder="Any specific events or observations..."
            rows={2}
            fieldType="general"
          />
        </div>

        <div>
          <Label className="text-sm font-medium">Doctor Name</Label>
          <Input
            value={shiftData.doctor}
            onChange={(e) => handleShiftChange(shift, "doctor", e.target.value)}
            placeholder="Enter doctor name"
            className="bg-white"
          />
        </div>
      </CardContent>
    </Card>
  )

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-semibold">Daily Progress Notes</h2>
          <p className="text-sm text-gray-600">Three-shift monitoring for {patient.name}</p>
        </div>
        <Button onClick={() => setShowAddNote(!showAddNote)} className="gap-2">
          <Plus className="w-4 h-4" />
          Add Progress Note
        </Button>
      </div>

      {/* Add New Note Form */}
      {showAddNote && (
        <Card className="border-blue-200 bg-blue-50">
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <Calendar className="w-5 h-5" />
                New Daily Progress Note
              </CardTitle>
              <div className="flex items-center gap-2">
                <Label>Date:</Label>
                <Input
                  type="date"
                  value={currentDate}
                  onChange={(e) => setCurrentDate(e.target.value)}
                  className="bg-white"
                />
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Patient Info */}
            <div className="bg-white p-3 rounded border">
              <Label className="font-medium">Patient Label:</Label>
              <div className="text-sm text-gray-700 mt-1">
                <strong>{patient.name}</strong> | MRN: {patient.mrn} | {patient.age}Y {patient.gender} | Ward:{" "}
                {patient.ward} | Bed: {patient.bed}
              </div>
            </div>

            {/* Three Shifts */}
            <div className="space-y-6">
              <ShiftCard
                title="Morning"
                icon={Sun}
                bgColor="bg-yellow-50 border-yellow-200"
                shift="morning"
                shiftData={morningShift}
              />

              <ShiftCard
                title="Evening"
                icon={Sunset}
                bgColor="bg-orange-50 border-orange-200"
                shift="evening"
                shiftData={eveningShift}
              />

              <ShiftCard
                title="Night"
                icon={Moon}
                bgColor="bg-indigo-50 border-indigo-200"
                shift="night"
                shiftData={nightShift}
              />
            </div>

            <div className="flex gap-2">
              <Button className="gap-2">
                <Calendar className="w-4 h-4" />
                Save Progress Note
              </Button>
              <Button variant="outline" onClick={() => setShowAddNote(false)}>
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Existing Notes */}
      <Card>
        <CardHeader>
          <CardTitle>Progress Notes History</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center py-8 text-gray-500">
            <Clock className="w-12 h-12 mx-auto mb-4 text-gray-400" />
            <h3 className="text-lg font-medium mb-2">No Progress Notes</h3>
            <p className="text-sm">Start documenting daily progress with three-shift monitoring.</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}