88:I[903690,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/2g0oc9k27bg22.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/143w7nhyqckcs.js","/chat-static/_next/static/immutable/chunks/0udaurr3r3784.js","/chat-static/_next/static/immutable/chunks/3m12kzoseic0s.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/3io-u6yty6rrx.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/2jj-dsskzkkea.js","/chat-static/_next/static/immutable/chunks/1j5oudbzt39os.js","/chat-static/_next/static/immutable/chunks/3bi-_argycpwi.js","/chat-static/_next/static/immutable/chunks/3hu0_8f7tf9w8.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0kuscvrfktvnt.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2l3og29it_ib5.js","/chat-static/_next/static/immutable/chunks/1m5fp3kw0roaj.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/2svky_5tna12v.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js"],"ExplicitChatIdProvider"] 89:I[838238,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/2g0oc9k27bg22.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/143w7nhyqckcs.js","/chat-static/_next/static/immutable/chunks/0udaurr3r3784.js","/chat-static/_next/static/immutable/chunks/3m12kzoseic0s.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/3io-u6yty6rrx.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/2jj-dsskzkkea.js","/chat-static/_next/static/immutable/chunks/1j5oudbzt39os.js","/chat-static/_next/static/immutable/chunks/3bi-_argycpwi.js","/chat-static/_next/static/immutable/chunks/3hu0_8f7tf9w8.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0kuscvrfktvnt.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2l3og29it_ib5.js","/chat-static/_next/static/immutable/chunks/1m5fp3kw0roaj.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/2svky_5tna12v.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js"],"SWRDataProvider"] 8c:[] 8d:[["b_zDAO3yXhjU9",null],["b_i5lIAdkkvRt",null],["b_iNjlq0LbXOX",null]] 8e:[["b_zDAO3yXhjU9",{"templateVersionId":null,"templateCanonId":null}],["b_i5lIAdkkvRt",{"templateVersionId":null,"templateCanonId":null}],["b_iNjlq0LbXOX",{"templateVersionId":null,"templateCanonId":null}]] 8f:[["b_TVYxwB96Eq7","$D2025-05-05T20:57:31.975Z"],["b_znvmAjWrrfh","$D2025-05-05T21:23:16.839Z"],["b_CTxGtFnZjjw","$D2025-05-05T21:35:50.555Z"],["b_3CRsSAiyEhK","$D2025-05-05T21:49:26.648Z"],["b_v5qI9U867Ma","$D2025-05-05T21:49:46.352Z"],["b_vtMvTnNlTup","$D2025-05-05T21:58:51.075Z"],["b_FiMK7mgJL9J","$D2025-05-05T22:17:35.455Z"],["b_dEavMLRubtR","$D2025-05-05T22:36:58.641Z"],["b_CgczXrfZn9D","$D2025-05-05T22:37:44.586Z"],["b_yWFaR9OM7Jx","$D2025-05-05T22:42:55.327Z"],["b_bl9PSOxI7E1","$D2025-05-05T23:47:25.730Z"],["b_8YoTeI2RO6t","$D2025-05-05T23:50:02.742Z"],["b_igYAEMjt4Zh","$D2025-05-05T23:58:55.997Z"],["b_1oU5xXx3bu7","$D2025-05-06T00:11:16.567Z"],["b_XzXQqebm2du","$D2025-05-06T00:13:36.016Z"],["b_zFSYb2OFxz4","$D2025-05-06T00:20:39.697Z"],["b_YrTF97v5Agp","$D2025-05-06T00:26:40.082Z"],["b_UZrOYEySI4M","$D2025-05-06T19:57:11.166Z"],["b_hAVQUqJqPPh","$D2025-05-06T19:57:39.660Z"],["b_etEk6OtGV5g","$D2025-05-06T20:12:43.101Z"],["b_wxxvT18Gc2c","$D2025-05-07T18:45:27.157Z"],["b_CgIFasG6eKj","$D2025-05-14T18:57:58.720Z"],["b_6nWw0R1imwo","$D2025-05-14T19:17:01.531Z"],["b_n7xJ3ADk1N0","$D2025-05-14T21:14:52.190Z"],["b_Znv5TgzBJpG","$D2025-05-14T21:20:46.747Z"],["b_eAtb22WaG3e","$D2025-05-14T21:26:10.961Z"],["b_anCqe2jWWYn","$D2025-05-14T22:32:29.823Z"],["b_vvHvIK7m766","$D2025-05-14T22:36:36.185Z"],["b_TiAJ5XCMg99","$D2025-05-14T22:40:34.811Z"],["b_Ghz09CQ0paX","$D2025-05-14T22:57:14.737Z"],["b_toCdMGENrVJ","$D2025-05-14T23:30:14.558Z"],["b_vxTHfrJxMM8","$D2025-05-14T23:35:33.643Z"],["b_36T4Ityoebp","$D2025-05-14T23:36:58.307Z"],["b_7lPexC3WM2c","$D2025-05-14T23:56:48.157Z"],["b_EUAd73Ee0mR","$D2025-05-15T00:01:27.103Z"],["b_hpVOSFOTQPB","$D2025-05-15T00:08:21.468Z"],["b_3Wv6M5ybh1U","$D2025-05-15T00:21:39.770Z"],["b_cLZvR8v2NMg","$D2025-05-15T00:45:12.809Z"],["b_rfg9iDtqkA4","$D2025-05-15T00:50:51.977Z"],["b_xkZCuyUlefd","$D2025-05-15T00:56:54.895Z"],["b_8J3JF8gLcmW","$D2025-05-15T00:57:05.882Z"],["b_FUKBVsFrA5o","$D2025-05-15T01:00:36.842Z"],["b_hYXAqMqtYDI","$D2025-05-15T01:01:02.467Z"],["b_iLLtH2okxR3","$D2025-05-15T01:06:40.795Z"],["b_EWMq3p6cQyb","$D2025-05-15T01:10:15.230Z"],["b_5DD3ANe8xVP","$D2025-05-15T01:12:05.488Z"],["b_PMQaAzo02Aw","$D2025-05-15T01:21:27.144Z"],["b_3Ezikpf2y5V","$D2025-05-15T01:28:17.200Z"],["b_PmKBorRNBal","$D2025-05-15T01:31:54.731Z"],["b_fNlHTCCtg8p","$D2025-05-15T01:39:25.125Z"],["b_fhyjveAf4iV","$D2025-05-15T01:47:12.503Z"],["b_twAJllRd9Xd","$D2025-05-15T01:49:33.224Z"],["b_IE1x4vbo8d8","$D2025-05-15T01:51:55.675Z"],["b_FWkduJ9nbQI","$D2025-05-15T10:32:55.527Z"],["b_dTPukHlFoIg","$D2025-05-15T10:36:51.992Z"],["b_h6Ia3T42ZsP","$D2025-05-15T10:47:30.380Z"],["b_FyWu5VnMxGR","$D2025-05-20T04:01:28.608Z"],["b_UmYHbiLI0t8","$D2025-05-20T04:07:45.138Z"],["b_Lr36jSTbw7t","$D2025-05-20T04:09:11.201Z"],["b_1L6tPmj1F6z","$D2025-05-20T04:09:37.022Z"],["b_KgA0kmGQFJp","$D2025-05-20T04:15:57.651Z"],["b_gKa2emPPZQ1","$D2025-05-20T04:17:37.247Z"],["b_rDiPXEgDKDp","$D2025-05-20T04:20:03.762Z"],["b_zJV8TnfxWOs","$D2025-05-20T04:25:32.287Z"],["b_bFijMnVf1SG","$D2025-05-20T04:28:30.041Z"],["b_SEat1e7nAtU","$D2025-05-20T04:35:27.204Z"],["b_9JQRaEen9So","$D2025-05-20T04:45:06.548Z"],["b_3Ls0ArB5Tth","$D2025-05-20T04:51:37.202Z"],["b_i0dpreQ2yEs","$D2025-05-20T04:58:05.385Z"],["b_cR9NxoNOXrh","$D2025-05-20T04:59:27.922Z"],["b_zDAO3yXhjU9","$D2025-05-20T05:04:11.416Z"],["b_i5lIAdkkvRt","$D2025-06-02T21:33:11.550Z"],["b_iNjlq0LbXOX","$D2025-06-02T22:57:04.433Z"]] 90:[["b_zDAO3yXhjU9",false],["b_i5lIAdkkvRt",false],["b_iNjlq0LbXOX",false]] 91:[["b_zDAO3yXhjU9",{"deploymentId":"dpl_6pk4pwMJLKQgfoSddsAPAUBBZRzB"}],["b_i5lIAdkkvRt","$undefined"],["b_iNjlq0LbXOX",{"git":{"ref":"main","sha":"e0d549c491ece54257cd608994f9a59525cc67cd","type":"github","repoId":0,"repoName":"v0-ssa-medical","ownerName":"some-air-2Take","commitMessage":"Initialized repository for chat CD Intake- Medical Form"}}]] 92:[["b_zDAO3yXhjU9",null],["b_i5lIAdkkvRt",null],["b_iNjlq0LbXOX",null]] 93:[["b_zDAO3yXhjU9",true],["b_i5lIAdkkvRt",true],["b_iNjlq0LbXOX",true]] 94:[["b_zDAO3yXhjU9",true],["b_i5lIAdkkvRt",true],["b_iNjlq0LbXOX",true]] 95:[] 96:T2aa4a,[V0_FILE]typescriptreact:file="components/relationships-view.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type { Provider, Condition, Medication, Examination } from "./medical-information-form" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Activity, User, Pill, FileText } from "lucide-react" interface RelationshipsViewProps { providers: Provider[] conditions: Condition[] medications: Medication[] examinations: Examination[] } export function RelationshipsView({ providers, conditions, medications, examinations }: RelationshipsViewProps) { // Helper functions to get related items const getProviderConditions = (providerId: string) => { return conditions.filter((condition) => condition.providers.includes(providerId)) } const getConditionProviders = (conditionId: string) => { return providers.filter((provider) => conditions.find((c) => c.id === conditionId)?.providers.includes(provider.id)) } const getConditionMedications = (conditionId: string) => { return medications.filter((medication) => medication.forConditions.includes(conditionId)) } const getConditionExaminations = (conditionId: string) => { return examinations.filter((examination) => examination.forConditions.includes(conditionId)) } return ( Conditions Providers {conditions.length === 0 ? (

Add conditions to see their relationships

) : (

{conditions.map((condition) => (

{condition.name}

{getConditionProviders(condition.id).length > 0 ? getConditionProviders(condition.id) .map((p) => `Dr. ${p.lastName}`) .join(", ") : "No providers"}

{getConditionMedications(condition.id).length > 0 ? getConditionMedications(condition.id) .map((m) => m.name) .join(", ") : "No medications"}

{getConditionExaminations(condition.id).length > 0 ? `${getConditionExaminations(condition.id).length} tests` : "No examinations"}

))}

)} {providers.length === 0 ? (

Add providers to see their relationships

) : (

{providers.map((provider) => (

Dr. {provider.lastName}

{getProviderConditions(provider.id).length > 0 ? getProviderConditions(provider.id) .map((c) => c.name) .join(", ") : "No conditions"}

))}

)} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { MedicalInformationForm } from "@/components/medical-information-form" export default function Home() { return (

Intake- Medical Information

Enter medical information for section 7, 8 and 9 of SSA form

) } [V0_FILE]typescriptreact:file="components/examinations-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { Provider, Condition, Examination } from "./medical-information-form" import { PlusCircle, Trash2, Edit, ArrowLeft, Save } from "lucide-react" interface ExaminationsSectionProps { examinations: Examination[] setExaminations: (examinations: Examination[]) => void providers: Provider[] conditions: Condition[] onPrevious: () => void } export function ExaminationsSection({ examinations, setExaminations, providers, conditions, onPrevious, }: ExaminationsSectionProps) { const [isAddingExamination, setIsAddingExamination] = useState(false) const [editingExaminationId, setEditingExaminationId] = useState(null) const [newExamination, setNewExamination] = useState({ id: "", type: "", date: "", orderedBy: "", forConditions: [], bodyPart: "", otherSpecification: "", }) const handleAddExamination = () => { const examinationId = `examination-${Date.now()}` const examinationToAdd = { ...newExamination, id: examinationId, } setExaminations([...examinations, examinationToAdd]) setNewExamination({ id: "", type: "", date: "", orderedBy: "", forConditions: [], bodyPart: "", otherSpecification: "", }) setIsAddingExamination(false) } const handleUpdateExamination = (examination: Examination) => { setExaminations(examinations.map((e) => (e.id === examination.id ? examination : e))) setEditingExaminationId(null) } const handleDeleteExamination = (id: string) => { setExaminations(examinations.filter((examination) => examination.id !== examination.id)) } const getOrderingProvider = (providerId: string) => { return providers.find((provider) => provider.id === providerId) } const getExaminationConditions = (examinationId: string) => { const examination = examinations.find((e) => e.id === examinationId) if (!examination) return [] return conditions.filter((condition) => examination.forConditions.includes(condition.id)) } const needsBodyPart = (type: string) => { return ["biopsy", "mri-ct-scan", "x-ray"].includes(type) } const getDisplayType = (examination: Examination) => { if (needsBodyPart(examination.type) && examination.bodyPart) { const typeMap: Record = { biopsy: "Biopsy", "mri-ct-scan": "MRI/CT Scan", "x-ray": "X-ray", } return `${typeMap[examination.type]} (${examination.bodyPart})` } if (examination.type === "other" && examination.otherSpecification) { return `Other: ${examination.otherSpecification}` } const typeLabels: Record = { "blood-test": "Blood test (not HIV)", "breathing-test": "Breathing test", "cardiac-catheterization": "Cardiac catheterization", eeg: "EEG (brain wave test)", ekg: "EKG (heart test)", "hearing-test": "Hearing test", "hiv-test": "HIV test", "speech-language-test": "Speech/language test", treadmill: "Treadmill (exercise test)", "vision-test": "Vision test", "psychological-test": "Psychological/IQ test", } return typeLabels[examination.type] || examination.type } const startEditing = (examination: Examination) => { setEditingExaminationId(examination.id) } const cancelEditing = () => { setEditingExaminationId(null) } const renderExaminationForm = ( examination: Examination, setExamination: (examination: Examination) => void, isNew = false, ) => { return ( {isNew ? "Add Medical Examination" : "Edit Medical Examination"} {isNew ? "Enter the details of your medical examination or test" : "Update the details of your medical examination or test"}

Examination Type

{needsBodyPart(examination.type) && (

Body Part setExamination({ ...examination, bodyPart: e.target.value })} placeholder="e.g., Spine, Knee, Lung" />

)} {examination.type === "other" && (

Please specify setExamination({ ...examination, otherSpecification: e.target.value })} placeholder="Specify the examination type" />

)}

Date (MM/YYYY) setExamination({ ...examination, date: e.target.value })} placeholder="MM/YYYY" />

{providers.length > 0 && (

Ordered By

)} {conditions.length > 0 && (

For Condition

)}

) } if (isAddingExamination) { return renderExaminationForm(newExamination, setNewExamination, true) } if (editingExaminationId) { const examinationToEdit = examinations.find((e) => e.id === editingExaminationId)! return renderExaminationForm(examinationToEdit, (updatedExamination) => { // Create a temporary copy to avoid directly modifying the state const tempExamination = { ...examinationToEdit, ...updatedExamination } handleUpdateExamination(tempExamination) }) } return ( Medical Examinations List all medical tests and examinations performed.

{examinations.length === 0 ? (

No examinations added yet

) : ( <>

{examinations.map((examination) => (

{getDisplayType(examination)}

{examination.date}

Ordered by: {examination.orderedBy ? `Dr. ${getOrderingProvider(examination.orderedBy)?.lastName || "Unknown"}` : "Not specified"} • For: {getExaminationConditions(examination.id).length > 0 ? ( getExaminationConditions(examination.id).map((condition) => ( {condition.name} {getExaminationConditions(examination.id).indexOf(condition) < getExaminationConditions(examination.id).length - 1 ? "," : ""} )) ) : ( None specified )}

))}

)}

) } [V0_FILE]typescriptreact:file="components/test-treatment-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { Provider, Condition, TestTreatment, BodySystem } from "./medical-information-form" import { PlusCircle, Trash2, Edit, ArrowLeft, Save } from "lucide-react" // Export the body system to treatments mapping for use in other components export const BODY_SYSTEM_TO_TREATMENTS: Record = { musculoskeletal: [ "Imaging (CT scan, MRI, X-ray)", "Assistive device (cane, walker, wheelchair)", "At home treatment (TENS, heat, cold)", "Occupational therapy (OT) or physical therapy (PT)", "Pain management", ], vision: [ "Vision tests (visual acuity, visual field, dilated)", "Vision correction or aids (glasses, contacts, magnifying glass)", "Imaging (CT scan, MRI)", "Tonometry (for glaucoma or other conditions)", "Surgery", ], hearing: [ "Hearing test", "Imaging (CT scan, MRI)", "Rotational chair test", "Surgery", "Occupational therapy (OT) or physical therapy (PT)", ], speech: [ "Speech evaluation", "Occupational therapy (OT) or physical therapy (PT)", "Imaging (CT scan, MRI)", "Surgery", "Hearing test", ], respiratory: [ "Breathing tests (PFTs, spirometry, peak flow)", "Imaging (CT scan, MRI, X-ray)", "Oxygen (supplemental oxygen/oxygen therapy)", "Inhaler", "CPAP", ], cardiovascular: [ "ECG (EKG)", "Echocardiogram (ECHO)", "Stress test", "Cardiac catheterization", "Blood pressure test", ], digestive: [ "Digestive/Gastrointestinal test (colonoscopy, endoscopy)", "Imaging (CT scan, MRI, X-ray)", "Barium x-ray", "Liver function tests", "GI procedure (colostomy, bowel resection)", ], genitourinary: [ "Urinalysis (urine test)", "Imaging (CT scan, MRI, X-ray)", "Ultrasound", "Glomerular filtration rate (GFR or EGFR)", "Dialysis", ], hematological: [ "Blood test (complete blood count/CBC)", "Blood transfusion", "CD4 count (type of T cell count)", "Imaging (CT scan, MRI)", "Antibody test", ], skin: ["Biopsy", "Antibody test", "Blood test for inflammation (CRP or ESR)", "Surgery", "Pain management"], endocrine: [ "Thyroid tests (TSH or T4)", "Glucose test", "Hemoglobin A1C (HbA1C or A1C)", "Imaging (CT scan, MRI)", "Blood test", ], congenital: [ "Karyotype analysis", "Evaluation", "Blood test", "Special education (when in school)", "Imaging (CT scan, MRI)", ], neurological: [ "EEG (electroencephalogram)", "EMG (electromyography)", "Nerve conduction study", "Imaging (CT scan, MRI)", "Lumbar puncture (spinal tap)", ], mental: [ "Psychiatric exam (evaluation)", "Therapy (talk therapy, cognitive behavioral)", "IQ test", "Evaluation", "fMRI (functional MRI)", ], cancer: [ "Biopsy", "Imaging (CT scan, MRI, PET)", "Cancer treatment (chemotherapy, radiation)", "Blood test", "Surgery", ], immune: [ "Antibody test (including ANA and rheumatoid factor/RF)", "Blood test for inflammation (CRP or ESR)", "Blood test", "Imaging (CT scan, MRI)", "CD4 count (type of T cell count)", ], } // Body system display names const BODY_SYSTEM_NAMES: Record = { musculoskeletal: "Musculoskeletal", vision: "Vision", hearing: "Hearing", speech: "Speech", respiratory: "Respiratory", cardiovascular: "Cardiovascular", digestive: "Digestive", genitourinary: "Genitourinary", hematological: "Hematological", skin: "Skin", endocrine: "Endocrine", congenital: "Congenital", neurological: "Neurological", mental: "Mental", cancer: "Cancer/Malignancy", immune: "Immune System", } interface TestTreatmentSectionProps { testTreatments: TestTreatment[] setTestTreatments: (testTreatments: TestTreatment[]) => void providers: Provider[] conditions: Condition[] onNext: () => void onPrevious: () => void } export function TestTreatmentSection({ testTreatments, setTestTreatments, providers, conditions, onNext, onPrevious, }: TestTreatmentSectionProps) { const [isAddingTestTreatment, setIsAddingTestTreatment] = useState(false) const [editingTestTreatmentId, setEditingTestTreatmentId] = useState(null) const [newTestTreatment, setNewTestTreatment] = useState({ id: "", type: "", date: "", orderedBy: "", forBodySystem: null, bodyPart: "", otherSpecification: "", }) const handleAddTestTreatment = () => { const testTreatmentId = `test-treatment-${Date.now()}` const testTreatmentToAdd = { ...newTestTreatment, id: testTreatmentId, } setTestTreatments([...testTreatments, testTreatmentToAdd]) setNewTestTreatment({ id: "", type: "", date: "", orderedBy: "", forBodySystem: null, bodyPart: "", otherSpecification: "", }) setIsAddingTestTreatment(false) } const handleUpdateTestTreatment = (testTreatment: TestTreatment) => { setTestTreatments(testTreatments.map((t) => (t.id === testTreatment.id ? testTreatment : t))) setEditingTestTreatmentId(null) } const handleDeleteTestTreatment = (id: string) => { setTestTreatments(testTreatments.filter((testTreatment) => testTreatment.id !== id)) } const getOrderingProvider = (providerId: string) => { return providers.find((provider) => provider.id === providerId) } const getDisplayType = (testTreatment: TestTreatment) => { return testTreatment.type === "Other" && testTreatment.otherSpecification ? `Other: ${testTreatment.otherSpecification}` : testTreatment.type } const startEditing = (testTreatment: TestTreatment) => { setEditingTestTreatmentId(testTreatment.id) } const cancelEditing = () => { setEditingTestTreatmentId(null) } // Get providers with body systems const providersWithBodySystems = providers.filter((p) => p.bodySystems && p.bodySystems.length > 0) // Get all unique body systems from providers const availableBodySystems = [...new Set(providersWithBodySystems.flatMap((p) => p.bodySystems))] const renderTestTreatmentForm = ( testTreatment: TestTreatment, setTestTreatment: (testTreatment: TestTreatment) => void, isNew = false, ) => { // Get providers that handle the selected body system const relevantProviders = testTreatment.forBodySystem ? providers.filter((p) => p.bodySystems.includes(testTreatment.forBodySystem)) : [] // Get treatments for the selected body system const relevantTreatments = testTreatment.forBodySystem ? BODY_SYSTEM_TO_TREATMENTS[testTreatment.forBodySystem] || [] : [] return ( {isNew ? "Add Test or Treatment" : "Edit Test or Treatment"} {isNew ? "Enter the details of your medical test or treatment" : "Update the details of your medical test or treatment"}

Body System

{testTreatment.forBodySystem && (

Test or Treatment Type

)} {testTreatment.type === "Other" && (

Please specify setTestTreatment({ ...testTreatment, otherSpecification: e.target.value })} placeholder="Specify the test or treatment type" />

)}

Date (MM/YYYY) setTestTreatment({ ...testTreatment, date: e.target.value })} placeholder="MM/YYYY" />

{relevantProviders.length > 0 && (

Ordered By

)}

) } if (isAddingTestTreatment) { return renderTestTreatmentForm(newTestTreatment, setNewTestTreatment, true) } if (editingTestTreatmentId) { const testTreatmentToEdit = testTreatments.find((t) => t.id === editingTestTreatmentId)! return renderTestTreatmentForm(testTreatmentToEdit, (updatedTestTreatment) => { // Create a temporary copy to avoid directly modifying the state const tempTestTreatment = { ...testTreatmentToEdit, ...updatedTestTreatment } handleUpdateTestTreatment(tempTestTreatment) }) } return ( Tests and Treatments List all medical tests and examinations performed.

{testTreatments.length === 0 ? (

No tests or treatments added yet

) : ( <>

{testTreatments.map((testTreatment) => (

{getDisplayType(testTreatment)}

{testTreatment.date}

Ordered by: {testTreatment.orderedBy ? `Dr. ${getOrderingProvider(testTreatment.orderedBy)?.lastName || "Unknown"}` : "Not specified"} • For: {testTreatment.forBodySystem ? BODY_SYSTEM_NAMES[testTreatment.forBodySystem] : "Not specified"}

))}

)}

) } [V0_FILE]typescriptreact:file="components/personal-details-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardFooter, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { PersonalDetails } from "./medical-information-form" interface PersonalDetailsFormProps { personalDetails: PersonalDetails setPersonalDetails: (details: PersonalDetails) => void onNext: () => void } export function PersonalDetailsForm({ personalDetails, setPersonalDetails, onNext }: PersonalDetailsFormProps) { const updateField = (field: keyof PersonalDetails, value: any) => { setPersonalDetails({ ...personalDetails, [field]: value, }) } return ( Personal Details Please provide your basic information

Height (Feet) * updateField("heightFeet", e.target.value)} required />

Height (Inches) * updateField("heightInches", e.target.value)} required />

Weight (lbs) * updateField("weight", e.target.value)} required />

Ethnicity *

Gender at Birth

Do you have health insurance?

Yes updateField("hasInsurance", true)} className="mr-4" /> No updateField("hasInsurance", false)} />

Does your vision impact your ability to work?

Yes updateField("affectsVision", true)} className="mr-4" /> No updateField("affectsVision", false)} />

Did any of your doctors recommend you apply for disability benefits?

Yes updateField("doctorRecommended", true)} className="mr-4" /> No updateField("doctorRecommended", false)} />

Tell us about your daily routine

Please include your morning activities, afternoon tasks, and evening routine. Focus on how your conditions affect these activities.

updateField("typicalDay", e.target.value)}
              placeholder="For example: In the morning, I have difficulty getting out of bed due to pain... During the afternoon, I need to rest frequently... In the evening, I require assistance with..."
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="workLimitations" className="text-base">
              Describe how your conditions limit your ability to work
            </Label>
            <textarea
              id="workLimitations"
              className="w-full min-h-[100px] p-3 border rounded-md"
              value={personalDetails.workLimitations || ""}
              onChange={(e) => updateField("workLimitations", e.target.value)}
              placeholder="Please describe how your medical conditions affect your ability to work..."
            />
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex justify-end">
        <Button onClick={onNext}>Next: Conditions</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/medical-information-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { PersonalDetailsForm } from "@/components/personal-details-form"
import { ProvidersSection } from "@/components/providers-section"
import { ConditionsSection } from "@/components/conditions-section"
import { MedicationsSection } from "@/components/medications-section"
import { TestTreatmentSection } from "@/components/test-treatment-section"
import { CheckCircle2 } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

// Update the PersonalDetails type to include the new fields
export type PersonalDetails = {
  heightFeet: string
  heightInches: string
  weight: string
  ethnicity: string
  gender: string
  hasInsurance: boolean
  doctorRecommended: boolean
  affectsVision: boolean
  workLimitations?: string
  typicalDay?: string
}

export type Provider = {
  id: string
  type: string
  referredBy: string
  firstName: string
  lastName: string
  phone: string
  address: string
  city: string
  state: string
  zipCode: string
  firstVisit: string
  lastVisit: string
  nextAppointment: string
  willFillForm: boolean
  conditions: string[]
  medications: string[]
  examinations: string[]
  bodySystems: BodySystem[]
  facilityName?: string
  facilityId?: string
}

// Update the Condition type to remove affectsVision
export type Condition = {
  id: string
  name: string
  impact: "mild" | "moderate" | "severe"
  providers: string[]
  medications: string[]
  examinations: string[]
  bodySystems?: BodySystem[]
}

export type Medication = {
  id: string
  name: string
  dosage: string
  frequency: string
  prescribedBy: string
  forConditions: string[]
}

// Update the Examination type to TestTreatment
export type TestTreatment = {
  id: string
  type: string
  date: string
  orderedBy: string
  forBodySystem: BodySystem
  otherSpecification?: string
}

export type Examination = {
  id: string
  type: string
  date: string
  orderedBy: string
  forConditions: string[]
  bodyPart?: string
  otherSpecification?: string
}

// Update the initial state in the MedicalInformationForm function
export function MedicalInformationForm() {
  const [personalDetails, setPersonalDetails] = useState<PersonalDetails>({
    heightFeet: "",
    heightInches: "",
    weight: "",
    ethnicity: "",
    gender: "",
    hasInsurance: null,
    doctorRecommended: null,
    affectsVision: null,
    workLimitations: "",
    typicalDay: "",
  })

const [providers, setProviders] = useState<Provider[]>([])
  const [conditions, setConditions] = useState<Condition[]>([])
  const [medications, setMedications] = useState<Medication[]>([])
  const [testTreatments, setTestTreatments] = useState<TestTreatment[]>([])
  const [examinations, setExaminations] = useState<Examination[]>([])
  const [activeTab, setActiveTab] = useState("personal")
  const [formSubmitted, setFormSubmitted] = useState(false)

const handleSubmit = () => {
    // In a real application, you would validate and submit the data
    console.log({
      personalDetails,
      providers,
      conditions,
      medications,
      testTreatments,
    })
    setFormSubmitted(true)
  }

const isFormComplete = () => {
    // Basic validation to check if required sections have at least one entry
    return (
      personalDetails.heightFeet !== "" &&
      personalDetails.weight !== "" &&
      providers.length > 0 &&
      conditions.length > 0
    )
  }

const getCompletionStatus = () => {
    const sections = [
      { name: "Personal Details", complete: personalDetails.heightFeet !== "" && personalDetails.weight !== "" },
      { name: "Conditions", complete: conditions.length > 0 },
      { name: "Providers", complete: providers.length > 0 },
      { name: "Tests/Treatments", complete: true }, // Optional
      { name: "Medications", complete: true }, // Optional
    ]

return sections
  }

return (
    <div className="space-y-6">
      {formSubmitted ? (
        <Alert className="bg-green-50 border-green-200">
          <CheckCircle2 className="h-4 w-4 text-green-600" />
          <AlertTitle className="text-green-800">Form Submitted Successfully</AlertTitle>
          <AlertDescription className="text-green-700">
            Your medical information has been collected. You can now use this information to complete your SSA
            disability application.
          </AlertDescription>
          <Button className="mt-4 bg-green-600 hover:bg-green-700" onClick={() => setFormSubmitted(false)}>
            Edit Information
          </Button>
        </Alert>
      ) : (
        <>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <div className="lg:col-span-2">
              <div className="flex flex-col space-y-1 sticky top-4">
                <Button
                  variant={activeTab === "personal" ? "default" : "outline"}
                  className="justify-start"
                  onClick={() => setActiveTab("personal")}
                >
                  Personal Details
                </Button>
                <Button
                  variant={activeTab === "conditions" ? "default" : "outline"}
                  className="justify-start"
                  onClick={() => setActiveTab("conditions")}
                >
                  Conditions
                </Button>
                <Button
                  variant={activeTab === "medications" ? "default" : "outline"}
                  className="justify-start"
                  onClick={() => setActiveTab("medications")}
                >
                  Medications
                </Button>
                <Button
                  variant={activeTab === "providers" ? "default" : "outline"}
                  className="justify-start"
                  onClick={() => setActiveTab("providers")}
                >
                  Providers
                </Button>
              </div>
            </div>

<div className="lg:col-span-10">
              {activeTab === "personal" && (
                <PersonalDetailsForm
                  personalDetails={personalDetails}
                  setPersonalDetails={setPersonalDetails}
                  onNext={() => setActiveTab("conditions")}
                />
              )}

{activeTab === "conditions" && (
                <ConditionsSection
                  conditions={conditions}
                  setConditions={setConditions}
                  providers={providers}
                  medications={medications}
                  examinations={examinations}
                  onNext={() => setActiveTab("medications")}
                  onPrevious={() => setActiveTab("personal")}
                />
              )}

{activeTab === "providers" && (
                <ProvidersSection
                  providers={providers}
                  setProviders={setProviders}
                  conditions={conditions}
                  medications={medications}
                  testTreatments={testTreatments}
                  onPrevious={() => setActiveTab("medications")}
                />
              )}

{activeTab === "testtreatments" && (
                <TestTreatmentSection
                  testTreatments={testTreatments}
                  setTestTreatments={setTestTreatments}
                  providers={providers}
                  conditions={conditions}
                  onNext={() => setActiveTab("medications")}
                  onPrevious={() => setActiveTab("providers")}
                />
              )}

{activeTab === "medications" && (
                <MedicationsSection
                  medications={medications}
                  setMedications={setMedications}
                  providers={providers}
                  conditions={conditions}
                  onNext={() => setActiveTab("providers")}
                  onPrevious={() => setActiveTab("conditions")}
                />
              )}
            </div>
          </div>
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/conditions-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import type { Provider, Condition, Medication, Examination, BodySystem } from "./medical-information-form"
import { PlusCircle, Trash2, Edit, ArrowLeft, Save, Search } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Checkbox } from "@/components/ui/checkbox"

// Comprehensive list of conditions for search
const ALL_CONDITIONS = [
  // Musculoskeletal
  { name: "Arthritis", bodySystems: ["musculoskeletal"] },
  { name: "Back Pain", bodySystems: ["musculoskeletal"] },
  { name: "Carpal Tunnel Syndrome", bodySystems: ["musculoskeletal", "neurological"] },
  { name: "Chronic Pain", bodySystems: ["musculoskeletal", "neurological"] },
  { name: "Fibromyalgia", bodySystems: ["musculoskeletal", "neurological"] },
  { name: "Osteoarthritis", bodySystems: ["musculoskeletal"] },
  { name: "Osteoporosis", bodySystems: ["musculoskeletal"] },
  { name: "Rheumatoid Arthritis", bodySystems: ["musculoskeletal", "immune"] },
  { name: "Sciatica", bodySystems: ["musculoskeletal", "neurological"] },
  { name: "Spinal Stenosis", bodySystems: ["musculoskeletal"] },
  { name: "Herniated Disc", bodySystems: ["musculoskeletal"] },
  { name: "Scoliosis", bodySystems: ["musculoskeletal"] },
  { name: "Joint Replacement", bodySystems: ["musculoskeletal"] },

// Vision
  { name: "Cataracts", bodySystems: ["vision"] },
  { name: "Glaucoma", bodySystems: ["vision"] },
  { name: "Macular Degeneration", bodySystems: ["vision"] },
  { name: "Vision Impairment", bodySystems: ["vision"] },
  { name: "Blindness", bodySystems: ["vision"] },
  { name: "Diabetic Retinopathy", bodySystems: ["vision", "endocrine"] },
  { name: "Retinal Detachment", bodySystems: ["vision"] },

// Hearing
  { name: "Hearing Loss", bodySystems: ["hearing"] },
  { name: "Tinnitus", bodySystems: ["hearing"] },
  { name: "Meniere's Disease", bodySystems: ["hearing"] },
  { name: "Acoustic Neuroma", bodySystems: ["hearing", "neurological"] },

// Speech
  { name: "Aphasia", bodySystems: ["speech", "neurological"] },
  { name: "Dysarthria", bodySystems: ["speech", "neurological"] },
  { name: "Stuttering", bodySystems: ["speech"] },
  { name: "Voice Disorders", bodySystems: ["speech"] },

// Respiratory
  { name: "Asthma", bodySystems: ["respiratory"] },
  { name: "Chronic Obstructive Pulmonary Disease (COPD)", bodySystems: ["respiratory"] },
  { name: "Pulmonary Fibrosis", bodySystems: ["respiratory"] },
  { name: "Sleep Apnea", bodySystems: ["respiratory"] },
  { name: "Pneumonia", bodySystems: ["respiratory"] },
  { name: "Lung Cancer", bodySystems: ["respiratory", "cancer"] },
  { name: "Cystic Fibrosis", bodySystems: ["respiratory", "congenital"] },
  { name: "Tuberculosis", bodySystems: ["respiratory", "immune"] },

// Cardiovascular
  { name: "Congestive Heart Failure", bodySystems: ["cardiovascular"] },
  { name: "Coronary Artery Disease", bodySystems: ["cardiovascular"] },
  { name: "Heart Disease", bodySystems: ["cardiovascular"] },
  { name: "High Blood Pressure (Hypertension)", bodySystems: ["cardiovascular"] },
  { name: "High Cholesterol", bodySystems: ["cardiovascular"] },
  { name: "Stroke", bodySystems: ["cardiovascular", "neurological"] },
  { name: "Arrhythmia", bodySystems: ["cardiovascular"] },
  { name: "Peripheral Artery Disease", bodySystems: ["cardiovascular"] },

// Digestive
  { name: "Crohn's Disease", bodySystems: ["digestive", "immune"] },
  { name: "Gastroesophageal Reflux Disease (GERD)", bodySystems: ["digestive"] },
  { name: "Irritable Bowel Syndrome (IBS)", bodySystems: ["digestive"] },
  { name: "Ulcerative Colitis", bodySystems: ["digestive", "immune"] },
  { name: "Liver Disease", bodySystems: ["digestive"] },
  { name: "Hepatitis", bodySystems: ["digestive", "immune"] },
  { name: "Cirrhosis", bodySystems: ["digestive"] },
  { name: "Gallstones", bodySystems: ["digestive"] },
  { name: "Pancreatitis", bodySystems: ["digestive"] },

// Genitourinary
  { name: "Kidney Disease", bodySystems: ["genitourinary"] },
  { name: "Urinary Incontinence", bodySystems: ["genitourinary"] },
  { name: "Interstitial Cystitis", bodySystems: ["genitourinary"] },
  { name: "Polycystic Kidney Disease", bodySystems: ["genitourinary", "congenital"] },
  { name: "Kidney Stones", bodySystems: ["genitourinary"] },
  { name: "Prostate Enlargement", bodySystems: ["genitourinary"] },
  { name: "Prostate Cancer", bodySystems: ["genitourinary", "cancer"] },

// Hematological
  { name: "Anemia", bodySystems: ["hematological"] },
  { name: "Hemophilia", bodySystems: ["hematological", "congenital"] },
  { name: "Leukemia", bodySystems: ["hematological", "cancer"] },
  { name: "Lymphoma", bodySystems: ["hematological", "cancer"] },
  { name: "Sickle Cell Disease", bodySystems: ["hematological", "congenital"] },
  { name: "Thrombocytopenia", bodySystems: ["hematological"] },

// Skin
  { name: "Dermatitis", bodySystems: ["skin"] },
  { name: "Eczema", bodySystems: ["skin"] },
  { name: "Psoriasis", bodySystems: ["skin", "immune"] },
  { name: "Skin Cancer", bodySystems: ["skin", "cancer"] },
  { name: "Rosacea", bodySystems: ["skin"] },
  { name: "Acne", bodySystems: ["skin"] },

// Endocrine
  { name: "Diabetes (Type 1)", bodySystems: ["endocrine", "immune"] },
  { name: "Diabetes (Type 2)", bodySystems: ["endocrine"] },
  { name: "Hypothyroidism", bodySystems: ["endocrine"] },
  { name: "Hyperthyroidism", bodySystems: ["endocrine"] },
  { name: "Addison's Disease", bodySystems: ["endocrine", "immune"] },
  { name: "Cushing's Syndrome", bodySystems: ["endocrine"] },
  { name: "Graves' Disease", bodySystems: ["endocrine", "immune"] },
  { name: "Hashimoto's Thyroiditis", bodySystems: ["endocrine", "immune"] },

// Congenital
  { name: "Down Syndrome", bodySystems: ["congenital"] },
  { name: "Spina Bifida", bodySystems: ["congenital", "neurological"] },
  { name: "Cerebral Palsy", bodySystems: ["congenital", "neurological", "musculoskeletal"] },
  { name: "Cystic Fibrosis", bodySystems: ["congenital", "respiratory"] },
  { name: "Cleft Lip/Palate", bodySystems: ["congenital"] },

// Neurological
  { name: "Alzheimer's Disease", bodySystems: ["neurological"] },
  { name: "Epilepsy", bodySystems: ["neurological"] },
  { name: "Multiple Sclerosis", bodySystems: ["neurological", "immune"] },
  { name: "Parkinson's Disease", bodySystems: ["neurological"] },
  { name: "Traumatic Brain Injury", bodySystems: ["neurological"] },
  { name: "Migraine", bodySystems: ["neurological"] },
  { name: "Neuropathy", bodySystems: ["neurological"] },
  { name: "ALS (Lou Gehrig's Disease)", bodySystems: ["neurological"] },
  { name: "Huntington's Disease", bodySystems: ["neurological", "congenital"] },

// Mental
  { name: "Anxiety", bodySystems: ["mental"] },
  { name: "Attention Deficit Hyperactivity Disorder (ADHD)", bodySystems: ["mental"] },
  { name: "Autism Spectrum Disorder", bodySystems: ["mental", "congenital"] },
  { name: "Bipolar Disorder", bodySystems: ["mental"] },
  { name: "Depression", bodySystems: ["mental"] },
  { name: "Post-Traumatic Stress Disorder (PTSD)", bodySystems: ["mental"] },
  { name: "Schizophrenia", bodySystems: ["mental"] },
  { name: "Obsessive-Compulsive Disorder (OCD)", bodySystems: ["mental"] },
  { name: "Eating Disorders", bodySystems: ["mental"] },

// Cancer
  { name: "Breast Cancer", bodySystems: ["cancer"] },
  { name: "Colon Cancer", bodySystems: ["cancer", "digestive"] },
  { name: "Lung Cancer", bodySystems: ["cancer", "respiratory"] },
  { name: "Prostate Cancer", bodySystems: ["cancer", "genitourinary"] },
  { name: "Skin Cancer", bodySystems: ["cancer", "skin"] },
  { name: "Leukemia", bodySystems: ["cancer", "hematological"] },
  { name: "Lymphoma", bodySystems: ["cancer", "hematological"] },
  { name: "Brain Cancer", bodySystems: ["cancer", "neurological"] },
  { name: "Pancreatic Cancer", bodySystems: ["cancer", "digestive"] },

// Immune
  { name: "HIV/AIDS", bodySystems: ["immune"] },
  { name: "Lupus", bodySystems: ["immune"] },
  { name: "Lyme Disease", bodySystems: ["immune"] },
  { name: "Rheumatoid Arthritis", bodySystems: ["immune", "musculoskeletal"] },
  { name: "Multiple Sclerosis", bodySystems: ["immune", "neurological"] },
  { name: "Celiac Disease", bodySystems: ["immune", "digestive"] },
  { name: "Sjogren's Syndrome", bodySystems: ["immune"] },
  { name: "Scleroderma", bodySystems: ["immune", "skin"] },
]

// Body system display names
const BODY_SYSTEM_NAMES: Record<BodySystem, string> = {
  musculoskeletal: "Musculoskeletal",
  vision: "Vision",
  hearing: "Hearing",
  speech: "Speech",
  respiratory: "Respiratory",
  cardiovascular: "Cardiovascular",
  digestive: "Digestive",
  genitourinary: "Genitourinary",
  hematological: "Hematological",
  skin: "Skin",
  endocrine: "Endocrine",
  congenital: "Congenital",
  neurological: "Neurological",
  mental: "Mental",
  cancer: "Cancer/Malignancy",
  immune: "Immune System",
}

interface ConditionsSectionProps {
  conditions: Condition[]
  setConditions: (conditions: Condition[]) => void
  providers: Provider[]
  medications: Medication[]
  examinations: Examination[]
  onNext: () => void
  onPrevious: () => void
}

export function ConditionsSection({
  conditions,
  setConditions,
  providers,
  medications,
  examinations,
  onNext,
  onPrevious,
}: ConditionsSectionProps) {
  const [isAddingCondition, setIsAddingCondition] = useState(false)
  const [editingConditionId, setEditingConditionId] = useState<string | null>(null)
  const [newCondition, setNewCondition] = useState<Condition & { bodySystems?: BodySystem[] }>({
    id: "",
    name: "",
    impact: "mild",
    providers: [],
    medications: [],
    examinations: [],
    bodySystems: [],
  })
  const [conditionOpen, setConditionOpen] = useState(false)

const handleAddCondition = () => {
    const conditionId = `condition-${Date.now()}`
    const { bodySystems, ...conditionToAdd } = {
      ...newCondition,
      id: conditionId,
    }

setConditions([...conditions, conditionToAdd])
    setNewCondition({
      id: "",
      name: "",
      impact: "mild",
      providers: [],
      medications: [],
      examinations: [],
      bodySystems: [],
    })
    setIsAddingCondition(false)
  }

const handleUpdateCondition = (condition: Condition & { bodySystems?: BodySystem[] }) => {
    const { bodySystems, ...conditionToUpdate } = condition
    setConditions(conditions.map((c) => (c.id === conditionToUpdate.id ? conditionToUpdate : c)))
    setEditingConditionId(null)
  }

const handleDeleteCondition = (id: string) => {
    setConditions(conditions.filter((condition) => condition.id !== id))
  }

const getConditionProviders = (conditionId: string) => {
    return providers.filter((provider) => conditions.find((c) => c.id === conditionId)?.providers.includes(provider.id))
  }

const getConditionMedications = (conditionId: string) => {
    return medications.filter((medication) => medication.forConditions.includes(conditionId))
  }

const getConditionExaminations = (conditionId: string) => {
    return examinations.filter((examination) => examination.forConditions.includes(conditionId))
  }

const startEditing = (condition: Condition) => {
    // Find the condition in ALL_CONDITIONS to get the suggested body systems
    const conditionInfo = ALL_CONDITIONS.find((c) => c.name === condition.name)

setEditingConditionId(condition.id)
    // Add bodySystems to the condition being edited
    const conditionWithSystems = {
      ...condition,
      bodySystems: (conditionInfo?.bodySystems as BodySystem[]) || [],
    }
    setNewCondition(conditionWithSystems)
  }

const cancelEditing = () => {
    setEditingConditionId(null)
  }

const handleConditionSearch = (
    value: string,
    condition: Condition & { bodySystems?: BodySystem[] },
    setCondition: (condition: Condition & { bodySystems?: BodySystem[] }) => void,
  ) => {
    const selectedCondition = ALL_CONDITIONS.find((c) => c.name === value)
    if (selectedCondition) {
      setCondition({
        ...condition,
        name: selectedCondition.name,
        bodySystems: selectedCondition.bodySystems as BodySystem[],
      })
    }
  }

const handleBodySystemChange = (
    bodySystem: BodySystem,
    checked: boolean,
    condition: Condition & { bodySystems?: BodySystem[] },
    setCondition: (condition: Condition & { bodySystems?: BodySystem[] }) => void,
  ) => {
    if (!condition.bodySystems) {
      condition.bodySystems = []
    }

if (checked) {
      setCondition({
        ...condition,
        bodySystems: [...condition.bodySystems, bodySystem],
      })
    } else {
      setCondition({
        ...condition,
        bodySystems: condition.bodySystems.filter((bs) => bs !== bodySystem),
      })
    }
  }

// Get all unique body systems from providers
  const availableBodySystems = [...new Set(providers.flatMap((p) => p.bodySystems))]

const renderConditionForm = (
    condition: Condition & { bodySystems?: BodySystem[] },
    setCondition: (condition: Condition & { bodySystems?: BodySystem[] }) => void,
    isNew = false,
  ) => {
    // Get providers that handle the selected body systems
    const relevantProviders =
      condition.bodySystems && condition.bodySystems.length > 0
        ? providers.filter((p) => p.bodySystems.some((bs) => condition.bodySystems.includes(bs)))
        : []

return (
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>{isNew ? "Add Medical Condition" : "Edit Medical Condition"}</CardTitle>
          <CardDescription>
            {isNew ? "Enter the details of your medical condition" : "Update the details of your medical condition"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <div className="space-y-2">
              <Label>Search for Condition</Label>
              <Popover open={conditionOpen} onOpenChange={setConditionOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={conditionOpen}
                    className="w-full justify-between"
                  >
                    {condition.name || "Search conditions..."}
                    <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-[400px] p-0">
                  <Command>
                    <CommandInput placeholder="Search conditions..." />
                    <CommandList>
                      <CommandEmpty>No condition found.</CommandEmpty>
                      <CommandGroup>
                        {ALL_CONDITIONS.map((c) => (
                          <CommandItem
                            key={c.name}
                            value={c.name}
                            onSelect={() => {
                              handleConditionSearch(c.name, condition, setCondition)
                              setConditionOpen(false)
                            }}
                          >
                            <span>{c.name}</span>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>

{condition.name && (
              <div className="hidden">
                <Label>Affected Body Systems</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                  {Object.entries(BODY_SYSTEM_NAMES).map(([key, name]) => (
                    <div key={key} className="flex items-center space-x-2">
                      <Checkbox
                        id={`${isNew ? "" : condition.id + "-"}bodySystem-${key}`}
                        checked={condition.bodySystems?.includes(key as BodySystem)}
                        onCheckedChange={(checked) =>
                          handleBodySystemChange(key as BodySystem, checked as boolean, condition, setCondition)
                        }
                      />
                      <Label htmlFor={`${isNew ? "" : condition.id + "-"}bodySystem-${key}`}>{name}</Label>
                    </div>
                  ))}
                </div>
              </div>
            )}

<div className="space-y-2">
              <Label>Does this condition have a mild, moderate, or severe impact on your ability to work?</Label>
              <RadioGroup
                value={condition.impact}
                onValueChange={(value: "mild" | "moderate" | "severe") => setCondition({ ...condition, impact: value })}
                className="flex flex-col space-y-1"
              >
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="mild" id={`${isNew ? "" : condition.id + "-"}impact-mild`} />
                  <Label htmlFor={`${isNew ? "" : condition.id + "-"}impact-mild`}>Mild</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="moderate" id={`${isNew ? "" : condition.id + "-"}impact-moderate`} />
                  <Label htmlFor={`${isNew ? "" : condition.id + "-"}impact-moderate`}>Moderate</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="severe" id={`${isNew ? "" : condition.id + "-"}impact-severe`} />
                  <Label htmlFor={`${isNew ? "" : condition.id + "-"}impact-severe`}>Severe</Label>
                </div>
              </RadioGroup>
            </div>

{/* {relevantProviders.length > 0 && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : condition.id + "-"}providers`}>
                  Select provider who treats this condition
                </Label>
                <Select
                  value={condition.providers[0] || ""}
                  onValueChange={(value) => setCondition({ ...condition, providers: [value] })}
                >
                  <SelectTrigger id={`${isNew ? "" : condition.id + "-"}providers`}>
                    <SelectValue placeholder="Select provider" />
                  </SelectTrigger>
                  <SelectContent>
                    {relevantProviders.map((provider) => (
                      <SelectItem key={provider.id} value={provider.id}>
                        Dr. {provider.firstName} {provider.lastName} ({provider.type})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )} */}
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={isNew ? () => setIsAddingCondition(false) : cancelEditing}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Cancel
          </Button>
          <Button onClick={isNew ? handleAddCondition : () => handleUpdateCondition(condition)}>
            <Save className="mr-2 h-4 w-4" />
            {isNew ? "Add Condition" : "Save Changes"}
          </Button>
        </CardFooter>
      </Card>
    )
  }

if (isAddingCondition) {
    return renderConditionForm(newCondition, setNewCondition, true)
  }

if (editingConditionId) {
    const conditionToEdit = conditions.find((c) => c.id === editingConditionId)!
    return renderConditionForm(newCondition, (updatedCondition) => {
      // Create a temporary copy to avoid directly modifying the state
      const tempCondition = { ...conditionToEdit, ...updatedCondition }
      handleUpdateCondition(tempCondition)
    })
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Medical Conditions</CardTitle>
        <CardDescription>List all medical conditions that limit your ability to work</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {conditions.length === 0 ? (
            <div className="text-center py-8 border border-dashed rounded-lg">
              <p className="text-muted-foreground">No conditions added yet</p>
              <Button variant="outline" className="mt-4" onClick={() => setIsAddingCondition(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Condition
              </Button>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 gap-4">
                {conditions.map((condition) => {
                  // Find the condition in ALL_CONDITIONS to get the body systems
                  const conditionInfo = ALL_CONDITIONS.find((c) => c.name === condition.name)
                  const bodySystems = conditionInfo?.bodySystems || []

return (
                    <Card key={condition.id} className="overflow-hidden">
                      <div className="p-4 flex items-center justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <h3 className="font-medium text-base">{condition.name}</h3>
                            <Badge
                              variant={
                                condition.impact === "severe"
                                  ? "destructive"
                                  : condition.impact === "moderate"
                                    ? "default"
                                    : "outline"
                              }
                            >
                              {condition.impact}
                            </Badge>
                          </div>
                          <div className="hidden">
                            <span className="text-muted-foreground">Body Systems:</span>
                            {bodySystems.length > 0 ? (
                              bodySystems.map((system, index) => (
                                <span key={system} className="text-sm">
                                  {BODY_SYSTEM_NAMES[system]}
                                  {index < bodySystems.length - 1 ? ", " : ""}
                                </span>
                              ))
                            ) : (
                              <span className="text-muted-foreground">None specified</span>
                            )}
                          </div>
                        </div>
                        <div className="flex space-x-2 ml-4">
                          <Button variant="ghost" size="icon" onClick={() => startEditing(condition)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" onClick={() => handleDeleteCondition(condition.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </Card>
                  )
                })}
              </div>

<Button variant="outline" className="w-full" onClick={() => setIsAddingCondition(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Another Condition
              </Button>
            </>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={onPrevious}>
          Previous: Personal Details
        </Button>
        <Button onClick={onNext}>Next: Medications</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/providers-section.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { Provider, Condition, Medication, TestTreatment, BodySystem } from "./medical-information-form"
import { PlusCircle, Trash2, Edit, ArrowLeft, Save, Search, Plus } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Checkbox } from "@/components/ui/checkbox"

// Sample conditions for body system mapping
const ALL_CONDITIONS = [
  {
    name: "Arthritis",
    bodySystems: ["musculoskeletal"],
  },
  {
    name: "Asthma",
    bodySystems: ["respiratory"],
  },
  {
    name: "Hypertension",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Diabetes",
    bodySystems: ["endocrine"],
  },
  {
    name: "Eczema",
    bodySystems: ["skin"],
  },
  {
    name: "Migraine",
    bodySystems: ["neurological"],
  },
  {
    name: "Depression",
    bodySystems: ["mental"],
  },
  {
    name: "Cataracts",
    bodySystems: ["vision"],
  },
  {
    name: "Hearing Loss",
    bodySystems: ["hearing"],
  },
  {
    name: "COPD",
    bodySystems: ["respiratory"],
  },
  {
    name: "Heart Failure",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Kidney Disease",
    bodySystems: ["genitourinary"],
  },
  {
    name: "Anemia",
    bodySystems: ["hematological"],
  },
  {
    name: "Thyroid Disorder",
    bodySystems: ["endocrine"],
  },
  {
    name: "Psoriasis",
    bodySystems: ["skin"],
  },
  {
    name: "Multiple Sclerosis",
    bodySystems: ["neurological"],
  },
  {
    name: "Anxiety",
    bodySystems: ["mental"],
  },
  {
    name: "Glaucoma",
    bodySystems: ["vision"],
  },
  {
    name: "Tinnitus",
    bodySystems: ["hearing"],
  },
  {
    name: "Sleep Apnea",
    bodySystems: ["respiratory"],
  },
  {
    name: "Coronary Artery Disease",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Urinary Tract Infection",
    bodySystems: ["genitourinary"],
  },
  {
    name: "Leukemia",
    bodySystems: ["hematological", "cancer"],
  },
  {
    name: "Osteoporosis",
    bodySystems: ["musculoskeletal"],
  },
  {
    name: "Macular Degeneration",
    bodySystems: ["vision"],
  },
  {
    name: "Speech Delay",
    bodySystems: ["speech"],
  },
  {
    name: "Crohn's Disease",
    bodySystems: ["digestive"],
  },
  {
    name: "Lupus",
    bodySystems: ["immune"],
  },
  {
    name: "Cystic Fibrosis",
    bodySystems: ["congenital"],
  },
  {
    name: "Parkinson's Disease",
    bodySystems: ["neurological"],
  },
  {
    name: "Bipolar Disorder",
    bodySystems: ["mental"],
  },
  {
    name: "Celiac Disease",
    bodySystems: ["digestive"],
  },
  {
    name: "Rheumatoid Arthritis",
    bodySystems: ["musculoskeletal", "immune"],
  },
  {
    name: "Down Syndrome",
    bodySystems: ["congenital"],
  },
  {
    name: "Stroke",
    bodySystems: ["neurological"],
  },
  {
    name: "Schizophrenia",
    bodySystems: ["mental"],
  },
  {
    name: "Ulcerative Colitis",
    bodySystems: ["digestive"],
  },
  {
    name: "HIV/AIDS",
    bodySystems: ["immune"],
  },
  {
    name: "Muscular Dystrophy",
    bodySystems: ["musculoskeletal", "congenital"],
  },
  {
    name: "Alzheimer's Disease",
    bodySystems: ["neurological"],
  },
  {
    name: "Obsessive-Compulsive Disorder (OCD)",
    bodySystems: ["mental"],
  },
  {
    name: "Gastroesophageal Reflux Disease (GERD)",
    bodySystems: ["digestive"],
  },
  {
    name: "Scleroderma",
    bodySystems: ["immune"],
  },
  {
    name: "Turner Syndrome",
    bodySystems: ["congenital"],
  },
  {
    name: "Epilepsy",
    bodySystems: ["neurological"],
  },
  {
    name: "Post-Traumatic Stress Disorder (PTSD)",
    bodySystems: ["mental"],
  },
  {
    name: "Irritable Bowel Syndrome (IBS)",
    bodySystems: ["digestive"],
  },
  {
    name: "Sjogren's Syndrome",
    bodySystems: ["immune"],
  },
  {
    name: "Klinefelter Syndrome",
    bodySystems: ["congenital"],
  },
  {
    name: "Amyotrophic Lateral Sclerosis (ALS)",
    bodySystems: ["neurological"],
  },
  {
    name: "Attention Deficit Hyperactivity Disorder (ADHD)",
    bodySystems: ["mental"],
  },
  {
    name: "Gallstones",
    bodySystems: ["digestive"],
  },
  {
    name: "Hashimoto's Thyroiditis",
    bodySystems: ["immune", "endocrine"],
  },
  {
    name: "Fragile X Syndrome",
    bodySystems: ["congenital"],
  },
  {
    name: "Bell's Palsy",
    bodySystems: ["neurological"],
  },
  {
    name: "Autism Spectrum Disorder (ASD)",
    bodySystems: ["mental", "neurological"],
  },
  {
    name: "Pancreatitis",
    bodySystems: ["digestive"],
  },
  {
    name: "Graves' Disease",
    bodySystems: ["immune", "endocrine"],
  },
  {
    name: "Prader-Willi Syndrome",
    bodySystems: ["congenital"],
  },
  {
    name: "Trigeminal Neuralgia",
    bodySystems: ["neurological"],
  },
  {
    name: "Eating Disorders",
    bodySystems: ["mental", "digestive"],
  },
  {
    name: "Cirrhosis",
    bodySystems: ["digestive"],
  },
  {
    name: "Addison's Disease",
    bodySystems: ["endocrine"],
  },
  {
    name: "Tourette Syndrome",
    bodySystems: ["neurological"],
  },
  {
    name: "Lyme Disease",
    bodySystems: ["immune", "musculoskeletal"],
  },
  {
    name: "Cushing's Syndrome",
    bodySystems: ["endocrine"],
  },
  {
    name: "Restless Legs Syndrome (RLS)",
    bodySystems: ["neurological"],
  },
  {
    name: "Pneumonia",
    bodySystems: ["respiratory"],
  },
  {
    name: "Multiple Myeloma",
    bodySystems: ["hematological", "cancer"],
  },
  {
    name: "Scoliosis",
    bodySystems: ["musculoskeletal"],
  },
  {
    name: "Cerebral Palsy",
    bodySystems: ["neurological", "musculoskeletal"],
  },
  {
    name: "Narcolepsy",
    bodySystems: ["neurological"],
  },
  {
    name: "Bronchitis",
    bodySystems: ["respiratory"],
  },
  {
    name: "Hodgkin's Lymphoma",
    bodySystems: ["hematological", "cancer"],
  },
  {
    name: "Carpal Tunnel Syndrome",
    bodySystems: ["musculoskeletal"],
  },
  {
    name: "Myasthenia Gravis",
    bodySystems: ["neurological"],
  },
  {
    name: "Emphysema",
    bodySystems: ["respiratory"],
  },
  {
    name: "Non-Hodgkin's Lymphoma",
    bodySystems: ["hematological", "cancer"],
  },
  {
    name: "Plantar Fasciitis",
    bodySystems: ["musculoskeletal"],
  },
  {
    name: "Peripheral Neuropathy",
    bodySystems: ["neurological"],
  },
  {
    name: "Sinusitis",
    bodySystems: ["respiratory"],
  },
  {
    name: "Melanoma",
    bodySystems: ["skin", "cancer"],
  },
  {
    name: "Sciatica",
    bodySystems: ["musculoskeletal"],
  },
  {
    name: "Vertigo",
    bodySystems: ["neurological"],
  },
  {
    name: "Tonsillitis",
    bodySystems: ["respiratory"],
  },
  {
    name: "Basal Cell Carcinoma",
    bodySystems: ["skin", "cancer"],
  },
  {
    name: "Bursitis",
    bodySystems: ["musculoskeletal"],
  },
  {
    name: "Essential Tremor",
    bodySystems: ["neurological"],
  },
  {
    name: "Laryngitis",
    bodySystems: ["respiratory"],
  },
  {
    name: "Squamous Cell Carcinoma",
    bodySystems: ["skin", "cancer"],
  },
  {
    name: "Tendonitis",
    bodySystems: ["musculoskeletal"],
  },
  {
    name: "Restless Legs Syndrome",
    bodySystems: ["neurological"],
  },
  {
    name: "Pharyngitis",
    bodySystems: ["respiratory"],
  },
  {
    name: "Meningitis",
    bodySystems: ["neurological"],
  },
  {
    name: "Pleurisy",
    bodySystems: ["respiratory"],
  },
  {
    name: "Encephalitis",
    bodySystems: ["neurological"],
  },
  {
    name: "Pericarditis",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Endocarditis",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Myocarditis",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Aortic Aneurysm",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Mitral Valve Prolapse",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Atrial Fibrillation",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Ventricular Tachycardia",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Pulmonary Embolism",
    bodySystems: ["respiratory", "cardiovascular"],
  },
  {
    name: "Deep Vein Thrombosis",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Peripheral Artery Disease",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Varicose Veins",
    bodySystems: ["cardiovascular"],
  },
  {
    name: "Hemorrhoids",
    bodySystems: ["digestive"],
  },
  {
    name: "Anal Fissure",
    bodySystems: ["digestive"],
  },
  {
    name: "Diverticulitis",
    bodySystems: ["digestive"],
  },
  {
    name: "Gastritis",
    bodySystems: ["digestive"],
  },
  {
    name: "Esophagitis",
    bodySystems: ["digestive"],
  },
  {
    name: "Hiatal Hernia",
    bodySystems: ["digestive"],
  },
  {
    name: "Peptic Ulcer",
    bodySystems: ["digestive"],
  },
  {
    name: "Gallbladder Disease",
    bodySystems: ["digestive"],
  },
  {
    name: "Pancreatic Cancer",
    bodySystems: ["digestive", "cancer"],
  },
  {
    name: "Liver Cancer",
    bodySystems: ["digestive", "cancer"],
  },
  {
    name: "Colon Cancer",
    bodySystems: ["digestive", "cancer"],
  },
  {
    name: "Rectal Cancer",
    bodySystems: ["digestive", "cancer"],
  },
  {
    name: "Bladder Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Kidney Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Prostate Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Testicular Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Ovarian Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Uterine Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Cervical Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Vaginal Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Vulvar Cancer",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Breast Cancer",
    bodySystems: ["cancer"],
  },
  {
    name: "Lung Cancer",
    bodySystems: ["respiratory", "cancer"],
  },
  {
    name: "Brain Cancer",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Thyroid Cancer",
    bodySystems: ["endocrine", "cancer"],
  },
  {
    name: "Leukemia",
    bodySystems: ["hematological", "cancer"],
  },
  {
    name: "Lymphoma",
    bodySystems: ["hematological", "cancer"],
  },
  {
    name: "Sarcoma",
    bodySystems: ["musculoskeletal", "cancer"],
  },
  {
    name: "Carcinoid Tumor",
    bodySystems: ["digestive", "cancer"],
  },
  {
    name: "Mesothelioma",
    bodySystems: ["respiratory", "cancer"],
  },
  {
    name: "Kaposi Sarcoma",
    bodySystems: ["skin", "cancer"],
  },
  {
    name: "Wilms Tumor",
    bodySystems: ["genitourinary", "cancer"],
  },
  {
    name: "Neuroblastoma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Retinoblastoma",
    bodySystems: ["vision", "cancer"],
  },
  {
    name: "Hepatoblastoma",
    bodySystems: ["digestive", "cancer"],
  },
  {
    name: "Rhabdomyosarcoma",
    bodySystems: ["musculoskeletal", "cancer"],
  },
  {
    name: "Ewing Sarcoma",
    bodySystems: ["musculoskeletal", "cancer"],
  },
  {
    name: "Osteosarcoma",
    bodySystems: ["musculoskeletal", "cancer"],
  },
  {
    name: "Chondrosarcoma",
    bodySystems: ["musculoskeletal", "cancer"],
  },
  {
    name: "Fibrosarcoma",
    bodySystems: ["musculoskeletal", "cancer"],
  },
  {
    name: "Liposarcoma",
    bodySystems: ["musculoskeletal", "cancer"],
  },
  {
    name: "Leiomyosarcoma",
    bodySystems: ["musculoskeletal", "cancer"],
  },
  {
    name: "Angiosarcoma",
    bodySystems: ["cardiovascular", "cancer"],
  },
  {
    name: "Hemangiosarcoma",
    bodySystems: ["cardiovascular", "cancer"],
  },
  {
    name: "Glioma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Meningioma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Schwannoma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Astrocytoma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Oligodendroglioma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Ependymoma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Medulloblastoma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Craniopharyngioma",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Pineal Gland Tumor",
    bodySystems: ["neurological", "cancer"],
  },
  {
    name: "Pituitary Tumor",
    bodySystems: ["endocrine", "neurological", "cancer"],
  },
  {
    name: "Adrenal Gland Tumor",
    bodySystems: ["endocrine", "cancer"],
  },
  {
    name: "Parathyroid Tumor",
    bodySystems: ["endocrine", "cancer"],
  },
  {
    name: "Thymoma",
    bodySystems: ["immune", "cancer"],
  },
  {
    name: "Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Adenocarcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Transitional Cell Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Small Cell Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Large Cell Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Spindle Cell Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Verrucous Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Papillary Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Follicular Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Medullary Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Anaplastic Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Clear Cell Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Signet Ring Cell Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Undifferentiated Carcinoma",
    bodySystems: ["cancer"],
  },
  {
    name: "Metastatic Cancer",
    bodySystems: ["cancer"],
  },
]

// Map of provider types to body systems
const PROVIDER_TYPE_TO_BODY_SYSTEMS: Record<string, BodySystem[]> = {
  "primary-care": ["musculoskeletal", "respiratory", "cardiovascular", "digestive", "skin"],
  specialist: [],
  psychiatrist: ["mental", "neurological"],
  psychologist: ["mental"],
  therapist: ["mental"],
  "physical-therapist": ["musculoskeletal"],
  chiropractor: ["musculoskeletal"],
  orthopedist: ["musculoskeletal"],
  "pain-specialist": ["musculoskeletal"],
  "occupational-therapist": ["musculoskeletal"],
  physiatrist: ["musculoskeletal"],
  rheumatologist: ["musculoskeletal", "immune"],
  neurologist: ["musculoskeletal", "neurological", "vision", "hearing", "speech"],
  neurosurgeon: ["musculoskeletal", "neurological"],
  ophthalmologist: ["vision"],
  optometrist: ["vision"],
  "retina-specialist": ["vision"],
  audiologist: ["hearing", "speech"],
  otolaryngologist: ["hearing", "speech"],
  "speech-therapist": ["speech"],
  pulmonologist: ["respiratory"],
  "respiratory-therapist": ["respiratory"],
  "thoracic-surgeon": ["respiratory"],
  cardiologist: ["cardiovascular"],
  "cardiac-surgeon": ["cardiovascular"],
  "vascular-surgeon": ["cardiovascular"],
  gastroenterologist: ["digestive"],
  hepatologist: ["digestive"],
  nephrologist: ["genitourinary"],
  urologist: ["genitourinary"],
  hematologist: ["hematological"],
  dermatologist: ["skin"],
  endocrinologist: ["endocrine"],
  geneticist: ["congenital"],
  oncologist: ["cancer"],
  immunologist: ["immune"],
  other: [],
}

// Map of body systems to provider types
const BODY_SYSTEM_TO_PROVIDER_TYPES: Record<BodySystem, string[]> = {
  musculoskeletal: [
    "primary-care",
    "physical-therapist",
    "chiropractor",
    "orthopedist",
    "pain-specialist",
    "occupational-therapist",
    "physiatrist",
    "rheumatologist",
    "neurologist",
    "neurosurgeon",
  ],
  vision: ["primary-care", "ophthalmologist", "optometrist", "retina-specialist", "neurologist"],
  hearing: ["primary-care", "audiologist", "otolaryngologist", "neurologist"],
  speech: ["primary-care", "speech-therapist", "audiologist", "otolaryngologist", "neurologist"],
  respiratory: ["primary-care", "pulmonologist", "respiratory-therapist", "thoracic-surgeon"],
  cardiovascular: ["primary-care", "cardiologist", "cardiac-surgeon", "vascular-surgeon"],
  digestive: ["primary-care", "gastroenterologist", "hepatologist"],
  genitourinary: ["primary-care", "nephrologist", "urologist"],
  hematological: ["primary-care", "hematologist", "oncologist"],
  skin: ["primary-care", "dermatologist"],
  endocrine: ["primary-care", "endocrinologist"],
  congenital: ["primary-care", "geneticist"],
  neurological: ["primary-care", "neurologist", "neurosurgeon", "psychiatrist"],
  mental: ["primary-care", "psychiatrist", "psychologist", "therapist"],
  cancer: ["primary-care", "oncologist"],
  immune: ["primary-care", "immunologist", "rheumatologist"],
}

// Provider type display names
const PROVIDER_TYPE_NAMES: Record<string, string> = {
  "primary-care": "Primary Care Physician",
  specialist: "Specialist",
  psychiatrist: "Psychiatrist",
  psychologist: "Psychologist",
  therapist: "Therapist",
  "physical-therapist": "Physical Therapist",
  chiropractor: "Chiropractor",
  orthopedist: "Orthopedist",
  "pain-specialist": "Pain Specialist",
  "occupational-therapist": "Occupational Therapist",
  physiatrist: "Physiatrist",
  rheumatologist: "Rheumatologist",
  neurologist: "Neurologist",
  neurosurgeon: "Neurosurgeon",
  ophthalmologist: "Ophthalmologist",
  optometrist: "Optometrist",
  "retina-specialist": "Retina Specialist",
  audiologist: "Audiologist",
  otolaryngologist: "Otolaryngologist/ENT",
  "speech-therapist": "Speech Therapist",
  pulmonologist: "Pulmonologist",
  "respiratory-therapist": "Respiratory Therapist",
  "thoracic-surgeon": "Thoracic Surgeon",
  cardiologist: "Cardiologist",
  "cardiac-surgeon": "Cardiac Surgeon",
  "vascular-surgeon": "Vascular Surgeon",
  gastroenterologist: "Gastroenterologist",
  hepatologist: "Hepatologist",
  nephrologist: "Nephrologist",
  urologist: "Urologist",
  hematologist: "Hematologist",
  dermatologist: ["skin"],
  endocrinologist: "Endocrinologist",
  geneticist: "Geneticist",
  oncologist: "Oncologist",
  immunologist: "Immunologist",
  other: "Other",
}

// Sample facilities for search functionality
const SAMPLE_FACILITIES = [
  {
    id: "fac1",
    name: "Memorial Hospital",
    address: "123 Main St",
    city: "Springfield",
    state: "IL",
    zipCode: "62701",
    providers: ["prov1", "prov3", "prov5"],
  },
  {
    id: "fac2",
    name: "Mercy Medical Center",
    address: "456 Oak Ave",
    city: "Riverside",
    state: "CA",
    zipCode: "92501",
    providers: ["prov2", "prov7", "prov9"],
  },
  {
    id: "fac3",
    name: "St. Luke's Hospital",
    address: "789 Elm Blvd",
    city: "Cedar Rapids",
    state: "IA",
    zipCode: "52404",
    providers: ["prov4", "prov6", "prov8"],
  },
  {
    id: "fac4",
    name: "University Medical Center",
    address: "101 College Dr",
    city: "Boston",
    state: "MA",
    zipCode: "02115",
    providers: ["prov10"],
  },
  {
    id: "fac5",
    name: "Kaiser Permanente",
    address: "202 Health Way",
    city: "Oakland",
    state: "CA",
    zipCode: "94612",
    providers: ["prov11", "prov12", "prov13"],
  },
  {
    id: "fac6",
    name: "Mayo Clinic",
    address: "303 Medical Pkwy",
    city: "Rochester",
    state: "MN",
    zipCode: "55905",
    providers: ["prov14", "prov15"],
  },
  {
    id: "fac7",
    name: "Cleveland Clinic",
    address: "404 Clinic Circle",
    city: "Cleveland",
    state: "OH",
    zipCode: "44195",
    providers: ["prov16", "prov17", "prov18"],
  },
  {
    id: "fac8",
    name: "Johns Hopkins Hospital",
    address: "505 Hopkins Pl",
    city: "Baltimore",
    state: "MD",
    zipCode: "21287",
    providers: ["prov19", "prov20"],
  },
  {
    id: "fac9",
    name: "Massachusetts General Hospital",
    address: "606 General St",
    city: "Boston",
    state: "MA",
    zipCode: "02114",
    providers: ["prov21", "prov22", "prov23"],
  },
  {
    id: "fac10",
    name: "UCSF Medical Center",
    address: "707 University Ave",
    city: "San Francisco",
    state: "CA",
    zipCode: "94143",
    providers: ["prov24", "prov25"],
  },
]

// Sample providers for search functionality
const SAMPLE_PROVIDERS = [
  {
    id: "prov1",
    firstName: "James",
    lastName: "Smith",
    phone: "555-123-4567",
    address: "123 Main St",
    city: "Springfield",
    state: "IL",
    zipCode: "62701",
    type: "primary-care",
    facilityId: "fac1",
  },
  {
    id: "prov2",
    firstName: "Mary",
    lastName: "Johnson",
    phone: "555-234-5678",
    address: "456 Oak Ave",
    city: "Riverside",
    state: "CA",
    zipCode: "92501",
    type: "cardiologist",
    facilityId: "fac2",
  },
  {
    id: "prov3",
    firstName: "Robert",
    lastName: "Williams",
    phone: "555-345-6789",
    address: "123 Main St",
    city: "Springfield",
    state: "IL",
    zipCode: "62701",
    type: "neurologist",
    facilityId: "fac1",
  },
  {
    id: "prov4",
    firstName: "Patricia",
    lastName: "Brown",
    phone: "555-456-7890",
    address: "789 Elm Blvd",
    city: "Cedar Rapids",
    state: "IA",
    zipCode: "52404",
    type: "psychiatrist",
    facilityId: "fac3",
  },
  {
    id: "prov5",
    firstName: "John",
    lastName: "Jones",
    phone: "555-567-8901",
    address: "123 Main St",
    city: "Springfield",
    state: "IL",
    zipCode: "62701",
    type: "orthopedist",
    facilityId: "fac1",
  },
  {
    id: "prov6",
    firstName: "Jennifer",
    lastName: "Miller",
    phone: "555-678-9012",
    address: "789 Elm Blvd",
    city: "Cedar Rapids",
    state: "IA",
    zipCode: "52404",
    type: "dermatologist",
    facilityId: "fac3",
  },
  {
    id: "prov7",
    firstName: "Michael",
    lastName: "Davis",
    phone: "555-789-0123",
    address: "456 Oak Ave",
    city: "Riverside",
    state: "CA",
    zipCode: "92501",
    type: "ophthalmologist",
    facilityId: "fac2",
  },
  {
    id: "prov8",
    firstName: "Linda",
    lastName: "Garcia",
    phone: "555-890-1234",
    address: "789 Elm Blvd",
    city: "Cedar Rapids",
    state: "IA",
    zipCode: "52404",
    type: "pulmonologist",
    facilityId: "fac3",
  },
  {
    id: "prov9",
    firstName: "William",
    lastName: "Rodriguez",
    phone: "555-901-2345",
    address: "456 Oak Ave",
    city: "Riverside",
    state: "CA",
    zipCode: "92501",
    type: "gastroenterologist",
    facilityId: "fac2",
  },
  {
    id: "prov10",
    firstName: "Elizabeth",
    lastName: "Wilson",
    phone: "555-012-3456",
    address: "101 College Dr",
    city: "Boston",
    state: "MA",
    zipCode: "02115",
    type: "endocrinologist",
    facilityId: "fac4",
  },
  // Additional providers for other facilities
  {
    id: "prov11",
    firstName: "David",
    lastName: "Martinez",
    phone: "555-123-7890",
    address: "202 Health Way",
    city: "Oakland",
    state: "CA",
    zipCode: "94612",
    type: "rheumatologist",
    facilityId: "fac5",
  },
  {
    id: "prov12",
    firstName: "Susan",
    lastName: "Anderson",
    phone: "555-234-8901",
    address: "202 Health Way",
    city: "Oakland",
    state: "CA",
    zipCode: "94612",
    type: "neurologist",
    facilityId: "fac5",
  },
  {
    id: "prov13",
    firstName: "Thomas",
    lastName: "Taylor",
    phone: "555-345-9012",
    address: "202 Health Way",
    city: "Oakland",
    state: "CA",
    zipCode: "94612",
    type: "cardiologist",
    facilityId: "fac5",
  },
  {
    id: "prov14",
    firstName: "Margaret",
    lastName: "Thomas",
    phone: "555-456-0123",
    address: "303 Medical Pkwy",
    city: "Rochester",
    state: "MN",
    zipCode: "55905",
    type: "oncologist",
    facilityId: "fac6",
  },
  {
    id: "prov15",
    firstName: "Joseph",
    lastName: "Jackson",
    phone: "555-567-1234",
    address: "303 Medical Pkwy",
    city: "Rochester",
    state: "MN",
    zipCode: "55905",
    type: "hematologist",
    facilityId: "fac6",
  },
  {
    id: "prov16",
    firstName: "Nancy",
    lastName: "White",
    phone: "555-678-2345",
    address: "404 Clinic Circle",
    city: "Cleveland",
    state: "OH",
    zipCode: "44195",
    type: "nephrologist",
    facilityId: "fac7",
  },
  {
    id: "prov17",
    firstName: "Charles",
    lastName: "Harris",
    phone: "555-789-3456",
    address: "404 Clinic Circle",
    city: "Cleveland",
    state: "OH",
    zipCode: "44195",
    type: "urologist",
    facilityId: "fac7",
  },
  {
    id: "prov18",
    firstName: "Lisa",
    lastName: "Martin",
    phone: "555-890-4567",
    address: "404 Clinic Circle",
    city: "Cleveland",
    state: "OH",
    zipCode: "44195",
    type: "endocrinologist",
    facilityId: "fac7",
  },
  {
    id: "prov19",
    firstName: "Daniel",
    lastName: "Thompson",
    phone: "555-901-5678",
    address: "404 Clinic Circle",
    city: "Baltimore",
    state: "MD",
    zipCode: "21287",
    type: "neurosurgeon",
    facilityId: "fac8",
  },
  {
    id: "prov20",
    firstName: "Karen",
    lastName: "Garcia",
    phone: "555-012-6789",
    address: "505 Hopkins Pl",
    city: "Baltimore",
    state: "MD",
    zipCode: "21287",
    type: "cardiac-surgeon",
    facilityId: "fac8",
  },
  {
    id: "prov21",
    firstName: "Richard",
    lastName: "Martinez",
    phone: "555-123-7890",
    address: "606 General St",
    city: "Boston",
    state: "MA",
    zipCode: "02114",
    type: "pulmonologist",
    facilityId: "fac9",
  },
  {
    id: "prov22",
    firstName: "Betty",
    lastName: "Robinson",
    phone: "555-234-8901",
    address: "606 General St",
    city: "Boston",
    state: "MA",
    zipCode: "02114",
    type: "gastroenterologist",
    facilityId: "fac9",
  },
  {
    id: "prov23",
    firstName: "Donald",
    lastName: "Clark",
    phone: "555-345-9012",
    address: "606 General St",
    city: "Boston",
    state: "MA",
    zipCode: "02114",
    type: "hepatologist",
    facilityId: "fac9",
  },
  {
    id: "prov24",
    firstName: "Helen",
    lastName: "Rodriguez",
    phone: "555-456-0123",
    address: "707 University Ave",
    city: "San Francisco",
    state: "CA",
    zipCode: "94143",
    type: "immunologist",
    facilityId: "fac10",
  },
  {
    id: "prov25",
    firstName: "Paul",
    lastName: "Lewis",
    phone: "555-567-1234",
    address: "707 University Ave",
    city: "San Francisco",
    state: "CA",
    zipCode: "94143",
    type: "geneticist",
    facilityId: "fac10",
  },
]

// Sample treatments for body system mapping
const BODY_SYSTEM_TO_TREATMENTS: Record<BodySystem, string[]> = {
  musculoskeletal: ["Physical Therapy", "Chiropractic Adjustment", "Occupational Therapy", "Pain Management"],
  vision: ["Eye Exam", "Vision Therapy", "Corrective Lenses"],
  hearing: ["Hearing Test", "Hearing Aids", "Speech Therapy"],
  speech: ["Speech Therapy", "Language Therapy"],
  respiratory: ["Pulmonary Rehabilitation", "Oxygen Therapy"],
  cardiovascular: ["Cardiac Rehabilitation", "Medication Management"],
  digestive: ["Dietary Changes", "Medication Management"],
  genitourinary: ["Medication Management", "Physical Therapy"],
  hematological: ["Medication Management", "Blood Transfusion"],
  skin: ["Topical Medications", "Light Therapy"],
  endocrine: ["Hormone Replacement Therapy", "Medication Management"],
  congenital: ["Genetic Counseling", "Specialized Therapies"],
  neurological: ["Neurological Rehabilitation", "Medication Management"],
  mental: ["Psychotherapy", "Medication Management"],
  cancer: ["Chemotherapy", "Radiation Therapy", "Surgery"],
  immune: ["Immunosuppressant Medications", "Immunotherapy"],
}

interface ProvidersSectionProps {
  providers: Provider[]
  setProviders: (providers: Provider[]) => void
  conditions: Condition[]
  medications: Medication[]
  testTreatments: TestTreatment[]
  onNext: () => void
  onPrevious: () => void
}

export function ProvidersSection({
  providers,
  setProviders,
  conditions,
  medications,
  testTreatments,
  onNext,
  onPrevious,
}: ProvidersSectionProps) {
  const [isAddingProvider, setIsAddingProvider] = useState(false)
  const [editingProviderId, setEditingProviderId] = useState<string | null>(null)
  const [newProvider, setNewProvider] = useState<Provider>({
    id: "",
    type: "primary-care", // Set a default type
    referredBy: "",
    firstName: "",
    lastName: "",
    phone: "",
    address: "",
    city: "",
    state: "",
    zipCode: "",
    firstVisit: "",
    lastVisit: "",
    nextAppointment: "",
    willFillForm: null,
    conditions: [],
    medications: [],
    examinations: [],
    bodySystems: [],
    facilityName: "",
    facilityId: "",
  })
  const [facilityOpen, setFacilityOpen] = useState(false)
  const [providerOpen, setProviderOpen] = useState(false)
  const [customFacilityOpen, setCustomFacilityOpen] = useState(false)
  const [customProviderOpen, setCustomProviderOpen] = useState(false)
  const [customFacility, setCustomFacility] = useState({
    name: "",
    address: "",
    city: "",
    state: "",
    zipCode: "",
  })
  const [customProvider, setCustomProvider] = useState({
    firstName: "",
    lastName: "",
    type: "",
    phone: "",
  })
  const [missingProviderTypesDialogOpen, setMissingProviderTypesDialogOpen] = useState(false)
  // Add this near the top of the component, after other useState declarations
  const [missingTypes, setMissingTypes] = useState<string[]>([])
  const [searchType, setSearchType] = useState<"provider" | "test-treatment">("provider")
  // Remove this line:
  const [testTreatmentDate, setTestTreatmentDate] = useState("")

// Add this useEffect hook right after all the useState declarations
  useEffect(() => {
    // Calculate missing provider types when conditions or providers change
    const missingProviderTypes = getMissingProviderTypes()
    console.log("Missing provider types:", missingProviderTypes)
    setMissingTypes(missingProviderTypes)
  }, [conditions, providers])

// Get all body systems from conditions
  const getBodySystemsFromConditions = () => {
    const bodySystems = new Set<BodySystem>()

conditions.forEach((condition) => {
      // Find the condition in ALL_CONDITIONS to get its body systems
      const conditionInfo = ALL_CONDITIONS.find((c) => c.name === condition.name)

if (conditionInfo && conditionInfo.bodySystems) {
        // Add each body system to the set
        conditionInfo.bodySystems.forEach((system) => {
          if (Object.keys(BODY_SYSTEM_NAMES).includes(system)) {
            bodySystems.add(system as BodySystem)
          }
        })
      }
    })

return Array.from(bodySystems)
  }

// Get provider types based on body systems from conditions
  const getProviderTypesFromBodySystems = (bodySystems: BodySystem[]) => {
    const providerTypes = new Set<string>()
    bodySystems.forEach((system) => {
      BODY_SYSTEM_TO_PROVIDER_TYPES[system].forEach((type) => providerTypes.add(type))
    })
    return Array.from(providerTypes)
  }

// Get missing provider types
  const getMissingProviderTypes = () => {
    // Get all body systems from conditions
    const bodySystems = getBodySystemsFromConditions()

// Get all provider types needed for these body systems
    const neededProviderTypes = getProviderTypesFromBodySystems(bodySystems)

// Get all provider types that are already covered by existing providers
    const existingProviderTypes = providers.map((p) => p.type)

// For debugging
    console.log("Body systems from conditions:", bodySystems)
    console.log("Needed provider types:", neededProviderTypes)
    console.log("Existing provider types:", existingProviderTypes)

// Filter out provider types that are already in the existing types or are generic types
    return neededProviderTypes.filter(
      (type) =>
        !existingProviderTypes.includes(type) && type !== "primary-care" && type !== "specialist" && type !== "other",
    )
  }

const handleAddProvider = () => {
    // Check if provider type is selected
    if (!newProvider.type) {
      alert("Provider type is required. Please select a provider type.")
      return
    }

if (searchType === "test-treatment" && newProvider.type && newProvider.firstVisit) {
      // Handle test/treatment case
      const testTreatmentId = `test-treatment-${Date.now()}`
      const newTestTreatment: TestTreatment = {
        id: testTreatmentId,
        type: newProvider.type,
        date: newProvider.firstVisit,
        orderedBy: "", // This would be filled in later
        forBodySystem: null, // This would be determined based on the treatment
        otherSpecification: "",
      }

// Add the test/treatment to the testTreatments state
      setTestTreatments([...testTreatments, newTestTreatment])

// Reset the form
      setSearchType("provider")
      setIsAddingProvider(false)

// Show a success message or notification here
      alert(`Test/Treatment "${newProvider.type}" added successfully for ${newProvider.facilityName}`)
      return
    }

// Original provider handling code
    const providerId = `provider-${Date.now()}`
    const providerToAdd = {
      ...newProvider,
      id: providerId,
    }

setProviders([...providers, providerToAdd])
    setNewProvider({
      id: "",
      type: "primary-care",
      referredBy: "",
      firstName: "",
      lastName: "",
      phone: "",
      address: "",
      city: "",
      state: "",
      zipCode: "",
      firstVisit: "",
      lastVisit: "",
      nextAppointment: "",
      willFillForm: null,
      conditions: [],
      medications: [],
      examinations: [],
      bodySystems: [],
      facilityName: "",
      facilityId: "",
    })
    setIsAddingProvider(false)
  }

const handleUpdateProvider = (provider: Provider) => {
    setProviders(providers.map((p) => (p.id === provider.id ? provider : p)))
    setEditingProviderId(null)
  }

const handleDeleteProvider = (id: string) => {
    setProviders(providers.filter((provider) => provider.id !== id))
  }

const getProviderConditions = (providerId: string) => {
    return conditions.filter((condition) => condition.providers.includes(providerId))
  }

const getProviderMedications = (providerId: string) => {
    return medications.filter((medication) => medication.prescribedBy === providerId)
  }

const getProviderTestTreatments = (providerId: string) => {
    return testTreatments.filter((test) => test.orderedBy === providerId)
  }

const startEditing = (provider: Provider) => {
    setEditingProviderId(provider.id)
  }

const cancelEditing = () => {
    setEditingProviderId(null)
  }

const handleProviderSearch = (value: string, provider: Provider, setProvider: (provider: Provider) => void) => {
    const selectedProvider = SAMPLE_PROVIDERS.find((p) => p.id === value)
    if (selectedProvider) {
      const facility = SAMPLE_FACILITIES.find((f) => f.id === selectedProvider.facilityId)
      const providerType = selectedProvider.type || "primary-care" // Ensure a default type

// Create a new provider object with all the updated fields
      const updatedProvider = {
        ...provider,
        firstName: selectedProvider.firstName,
        lastName: selectedProvider.lastName,
        phone: selectedProvider.phone,
        address: selectedProvider.address,
        city: selectedProvider.city,
        state: selectedProvider.state,
        zipCode: selectedProvider.zipCode,
        type: providerType,
        facilityId: selectedProvider.facilityId,
        facilityName: facility ? facility.name : "",
        bodySystems: PROVIDER_TYPE_TO_BODY_SYSTEMS[providerType] || [],
      }

// Update the provider state
      setProvider(updatedProvider)

// Close the provider search popover
      setProviderOpen(false)
    }
  }

const handleFacilitySearch = (value: string, provider: Provider, setProvider: (provider: Provider) => void) => {
    const selectedFacility = SAMPLE_FACILITIES.find((f) => f.id === value)
    if (selectedFacility) {
      setProvider({
        ...provider,
        facilityName: selectedFacility.name,
        facilityId: selectedFacility.id,
        address: selectedFacility.address,
        city: selectedFacility.city,
        state: selectedFacility.state,
        zipCode: selectedFacility.zipCode,
      })
    }
  }

const handleAddCustomFacility = () => {
    const facilityId = `custom-facility-${Date.now()}`
    const newFacility = {
      id: facilityId,
      name: customFacility.name,
      address: customFacility.address,
      city: customFacility.city,
      state: customFacility.state,
      zipCode: customFacility.zipCode,
      providers: [],
    }

// In a real app, you would add this to your database
    // For now, we'll just update the provider
    setNewProvider({
      ...newProvider,
      facilityName: customFacility.name,
      facilityId: facilityId,
      address: customFacility.address,
      city: customFacility.city,
      state: customFacility.state,
      zipCode: customFacility.zipCode,
    })

setCustomFacility({
      name: "",
      address: "",
      city: "",
      state: "",
      zipCode: "",
    })
    setCustomFacilityOpen(false)
  }

const handleAddCustomProvider = () => {
    // In a real app, you would add this to your database
    // For now, we'll just update the provider form
    setNewProvider({
      ...newProvider,
      firstName: customProvider.firstName,
      lastName: customProvider.lastName,
      type: customProvider.type || "primary-care", // Ensure a default type
      phone: customProvider.phone,
    })

setCustomProvider({
      firstName: "",
      lastName: "",
      type: "",
      phone: "",
    })
    setCustomProviderOpen(false)
  }

const handleTestTreatmentSelection = (treatment: string) => {
    // Create a test/treatment entry
    const testTreatmentId = `test-treatment-${Date.now()}`
    const newTestTreatment: TestTreatment = {
      id: testTreatmentId,
      type: treatment,
      date: newProvider.firstVisit,
      orderedBy: newProvider.id || "", // Link to the current provider if available
      forBodySystem: null, // This would be determined based on the treatment
      otherSpecification: "",
    }

// Add the test/treatment to the testTreatments state
    setTestTreatments([...testTreatments, newTestTreatment])

// Reset the form
    setSearchType("provider")
  }

// Get available provider types based on conditions
  const availableProviderTypes =
    conditions.length > 0
      ? [
          ...new Set([
            ...getProviderTypesFromBodySystems(getBodySystemsFromConditions()),
            // Include existing provider types to ensure they're always available
            ...providers.map((p) => p.type).filter(Boolean),
          ]),
        ]
      : Object.keys(PROVIDER_TYPE_NAMES)

// Get providers for selected facility
  const getProvidersForFacility = (facilityId: string) => {
    return SAMPLE_PROVIDERS.filter((p) => p.facilityId === facilityId)
  }

const renderProviderForm = (provider: Provider, setProvider: (provider: Provider) => void, isNew = false) => {
    // Get all providers except the current one being edited for the referral dropdown
    const otherProviders = providers.filter((p) => p.id !== provider.id)

// Get providers for selected facility
    const facilityProviders = provider.facilityId ? getProvidersForFacility(provider.facilityId) : []

return (
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>{isNew ? "Add Healthcare Provider" : "Edit Healthcare Provider"}</CardTitle>
          <CardDescription>
            {isNew ? "Enter the details of your healthcare provider" : "Update the details of your healthcare provider"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2 md:col-span-2">
              <Label>What would you like to search for?</Label>
              <div className="flex space-x-2">
                <Button
                  variant={searchType === "provider" ? "default" : "outline"}
                  onClick={() => setSearchType("provider")}
                  type="button"
                >
                  Provider
                </Button>
                <Button
                  variant={searchType === "test-treatment" ? "default" : "outline"}
                  onClick={() => setSearchType("test-treatment")}
                  type="button"
                >
                  Test/Treatment
                </Button>
              </div>
            </div>

<div className="space-y-2 md:col-span-2">
              {searchType === "test-treatment" ? (
                <>
                  <Label>Search for Test/Treatment</Label>
                  <div className="space-y-4">
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button variant="outline" role="combobox" className="w-full justify-between">
                          {newProvider.type || "Search tests/treatments..."}
                          <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-[400px] p-0">
                        <Command>
                          <CommandInput placeholder="Search tests/treatments..." />
                          <CommandList>
                            <CommandEmpty>No test/treatment found.</CommandEmpty>
                            <CommandGroup>
                              {Object.values(BODY_SYSTEM_TO_TREATMENTS)
                                .flat()
                                .map((treatment, index) => (
                                  <CommandItem
                                    key={index}
                                    value={treatment}
                                    onSelect={() => {
                                      setNewProvider({
                                        ...newProvider,
                                        type: treatment,
                                      })
                                    }}
                                  >
                                    <span>{treatment}</span>
                                  </CommandItem>
                                ))}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                  </div>
                </>
              ) : (
                <>
                  <Label>Search for Provider</Label>
                  <div className="flex items-center space-x-2">
                    <Popover open={providerOpen} onOpenChange={setProviderOpen}>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          role="combobox"
                          aria-expanded={providerOpen}
                          className="w-full justify-between"
                        >
                          {provider.firstName ? `${provider.firstName} ${provider.lastName}` : "Search providers..."}
                          <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-[400px] p-0">
                        <Command>
                          <CommandInput placeholder="Search by name or provider type..." />
                          <CommandList>
                            <CommandEmpty>No provider found.</CommandEmpty>
                            <CommandGroup>
                              {(provider.facilityId ? facilityProviders : SAMPLE_PROVIDERS).map((p) => {
                                const providerType = PROVIDER_TYPE_NAMES[p.type] || p.type
                                // This makes the provider searchable by both name and type
                                return (
                                  <CommandItem
                                    key={p.id}
                                    value={`${p.firstName} ${p.lastName} ${providerType}`}
                                    onSelect={() => {
                                      handleProviderSearch(p.id, provider, setProvider)
                                      setProviderOpen(false)
                                    }}
                                  >
                                    <div className="flex flex-col">
                                      <span className="font-medium">
                                        {p.firstName} {p.lastName}
                                      </span>
                                      <span className="text-xs text-muted-foreground">{providerType}</span>
                                    </div>
                                  </CommandItem>
                                )
                              })}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                    <Dialog open={customProviderOpen} onOpenChange={setCustomProviderOpen}>
                      <DialogTrigger asChild>
                        <Button variant="outline" size="icon">
                          <Plus className="h-4 w-4" />
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Add Custom Provider</DialogTitle>
                          <DialogDescription>
                            Enter the details of the provider that is not in our database.
                          </DialogDescription>
                        </DialogHeader>
                        <div className="grid gap-4 py-4">
                          <div className="grid grid-cols-2 gap-4">
                            <div className="space-y-2">
                              <Label htmlFor="custom-provider-firstname">First Name</Label>
                              <Input
                                id="custom-provider-firstname"
                                value={customProvider.firstName}
                                onChange={(e) => setCustomProvider({ ...customProvider, firstName: e.target.value })}
                              />
                            </div>
                            <div className="space-y-2">
                              <Label htmlFor="custom-provider-lastname">Last Name</Label>
                              <Input
                                id="custom-provider-lastname"
                                value={customProvider.lastName}
                                onChange={(e) => setCustomProvider({ ...customProvider, lastName: e.target.value })}
                              />
                            </div>
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="custom-provider-type" className="font-medium">
                              Provider Type
                            </Label>
                            <Select
                              value={customProvider.type}
                              onValueChange={(value) => setCustomProvider({ ...customProvider, type: value })}
                            >
                              <SelectTrigger id="custom-provider-type">
                                <SelectValue placeholder="Select type" />
                              </SelectTrigger>
                              <SelectContent>
                                {availableProviderTypes.map((type) => (
                                  <SelectItem key={type} value={type}>
                                    {PROVIDER_TYPE_NAMES[type]}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="custom-provider-phone">Phone</Label>
                            <Input
                              id="custom-provider-phone"
                              value={customProvider.phone}
                              onChange={(e) => setCustomProvider({ ...customProvider, phone: e.target.value })}
                            />
                          </div>
                        </div>
                        <DialogFooter>
                          <Button onClick={handleAddCustomProvider}>Add Provider</Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                  </div>
                </>
              )}
            </div>

<div className="space-y-2 md:col-span-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}providerType`}>
                Provider Type <span className="text-red-500">*</span>
              </Label>
              <Select value={provider.type} onValueChange={(value) => setProvider({ ...provider, type: value })}>
                <SelectTrigger id={`${isNew ? "" : provider.id + "-"}providerType`}>
                  <SelectValue placeholder="Select type">
                    {provider.type && PROVIDER_TYPE_NAMES[provider.type]
                      ? PROVIDER_TYPE_NAMES[provider.type]
                      : "Select type"}
                  </SelectValue>
                </SelectTrigger>
                <SelectContent>
                  {availableProviderTypes.map((type) => (
                    <SelectItem key={type} value={type}>
                      {PROVIDER_TYPE_NAMES[type]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}firstName`}>First Name</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}firstName`}
                value={provider.firstName}
                onChange={(e) => setProvider({ ...provider, firstName: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}lastName`}>Last Name</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}lastName`}
                value={provider.lastName}
                onChange={(e) => setProvider({ ...provider, lastName: e.target.value })}
              />
            </div>

<div className="space-y-2 md:col-span-2">
              <Label>Search for Facility</Label>
              <div className="flex items-center space-x-2">
                <Popover open={facilityOpen} onOpenChange={setFacilityOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={facilityOpen}
                      className="w-full justify-between"
                    >
                      {provider.facilityName || "Search facilities..."}
                      <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-[400px] p-0">
                    <Command>
                      <CommandInput placeholder="Search facilities..." />
                      <CommandList>
                        <CommandEmpty>No facility found.</CommandEmpty>
                        <CommandGroup>
                          {SAMPLE_FACILITIES.map((f) => (
                            <CommandItem
                              key={f.id}
                              value={f.id}
                              onSelect={() => {
                                handleFacilitySearch(f.id, provider, setProvider)
                                setFacilityOpen(false)
                              }}
                            >
                              <span>
                                {f.name} - {f.city}, {f.state}
                              </span>
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
                <Dialog open={customFacilityOpen} onOpenChange={setCustomFacilityOpen}>
                  <DialogTrigger asChild>
                    <Button variant="outline" size="icon">
                      <Plus className="h-4 w-4" />
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Add Custom Facility</DialogTitle>
                      <DialogDescription>
                        Enter the details of the facility that is not in our database.
                      </DialogDescription>
                    </DialogHeader>
                    <div className="grid gap-4 py-4">
                      <div className="space-y-2">
                        <Label htmlFor="custom-facility-name">Facility Name</Label>
                        <Input
                          id="custom-facility-name"
                          value={customFacility.name}
                          onChange={(e) => setCustomFacility({ ...customFacility, name: e.target.value })}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="custom-facility-address">Address</Label>
                        <Input
                          id="custom-facility-address"
                          value={customFacility.address}
                          onChange={(e) => setCustomFacility({ ...customFacility, address: e.target.value })}
                        />
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="custom-facility-city">City</Label>
                          <Input
                            id="custom-facility-city"
                            value={customFacility.city}
                            onChange={(e) => setCustomFacility({ ...customFacility, city: e.target.value })}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="custom-facility-state">State</Label>
                          <Select
                            value={customFacility.state}
                            onChange={(value) => setCustomFacility({ ...customFacility, state: value })}
                          >
                            <SelectTrigger id="custom-facility-state">
                              <SelectValue placeholder="Select state" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="AL">Alabama</SelectItem>
                              <SelectItem value="AK">Alaska</SelectItem>
                              <SelectItem value="AZ">Arizona</SelectItem>
                              <SelectItem value="AR">Arkansas</SelectItem>
                              <SelectItem value="CA">California</SelectItem>
                              <SelectItem value="CO">Colorado</SelectItem>
                              <SelectItem value="CT">Connecticut</SelectItem>
                              <SelectItem value="DE">Delaware</SelectItem>
                              <SelectItem value="FL">Florida</SelectItem>
                              <SelectItem value="GA">Georgia</SelectItem>
                              <SelectItem value="HI">Hawaii</SelectItem>
                              <SelectItem value="ID">Idaho</SelectItem>
                              <SelectItem value="IL">Illinois</SelectItem>
                              <SelectItem value="IN">Indiana</SelectItem>
                              <SelectItem value="IA">Iowa</SelectItem>
                              <SelectItem value="KS">Kansas</SelectItem>
                              <SelectItem value="KY">Kentucky</SelectItem>
                              <SelectItem value="LA">Louisiana</SelectItem>
                              <SelectItem value="ME">Maine</SelectItem>
                              <SelectItem value="MD">Maryland</SelectItem>
                              <SelectItem value="MA">Massachusetts</SelectItem>
                              <SelectItem value="MI">Michigan</SelectItem>
                              <SelectItem value="MN">Minnesota</SelectItem>
                              <SelectItem value="MS">Mississippi</SelectItem>
                              <SelectItem value="MO">Missouri</SelectItem>
                              <SelectItem value="MT">Montana</SelectItem>
                              <SelectItem value="NE">Nebraska</SelectItem>
                              <SelectItem value="NV">Nevada</SelectItem>
                              <SelectItem value="NH">New Hampshire</SelectItem>
                              <SelectItem value="NJ">New Jersey</SelectItem>
                              <SelectItem value="NM">New Mexico</SelectItem>
                              <SelectItem value="NY">New York</SelectItem>
                              <SelectItem value="NC">North Carolina</SelectItem>
                              <SelectItem value="ND">North Dakota</SelectItem>
                              <SelectItem value="OH">Ohio</SelectItem>
                              <SelectItem value="OK">Oklahoma</SelectItem>
                              <SelectItem value="OR">Oregon</SelectItem>
                              <SelectItem value="PA">Pennsylvania</SelectItem>
                              <SelectItem value="RI">Rhode Island</SelectItem>
                              <SelectItem value="SC">South Carolina</SelectItem>
                              <SelectItem value="SD">South Dakota</SelectItem>
                              <SelectItem value="TN">Tennessee</SelectItem>
                              <SelectItem value="TX">Texas</SelectItem>
                              <SelectItem value="UT">Utah</SelectItem>
                              <SelectItem value="VT">Vermont</SelectItem>
                              <SelectItem value="VA">Virginia</SelectItem>
                              <SelectItem value="WA">Washington</SelectItem>
                              <SelectItem value="WV">West Virginia</SelectItem>
                              <SelectItem value="WI">Wisconsin</SelectItem>
                              <SelectItem value="WY">Wyoming</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="custom-facility-zipcode">Zip Code</Label>
                        <Input
                          id="custom-facility-zipcode"
                          value={customFacility.zipCode}
                          onChange={(e) => setCustomFacility({ ...customFacility, zipCode: e.target.value })}
                        />
                      </div>
                    </div>
                    <DialogFooter>
                      <Button onClick={handleAddCustomFacility}>Add Facility</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>
            </div>

{otherProviders.length > 0 && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : provider.id + "-"}referredBy`}>Who referred you to this?</Label>
                <Select
                  value={provider.referredBy}
                  onValueChange={(value) => setProvider({ ...provider, referredBy: value })}
                >
                  <SelectTrigger id={`${isNew ? "" : provider.id + "-"}referredBy`}>
                    <SelectValue placeholder="Select referring provider" />
                  </SelectTrigger>
                  <SelectContent>
                    {otherProviders.map((p) => (
                      <SelectItem key={p.id} value={p.id}>
                        Dr. {p.firstName} {p.lastName}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}phone`}>Phone</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}phone`}
                value={provider.phone}
                onChange={(e) => setProvider({ ...provider, phone: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}address`}>Street Address</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}address`}
                value={provider.address}
                onChange={(e) => setProvider({ ...provider, address: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}city`}>City</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}city`}
                value={provider.city}
                onChange={(e) => setProvider({ ...provider, city: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}state`}>State</Label>
              <Select value={provider.state} onValueChange={(value) => setProvider({ ...provider, state: value })}>
                <SelectTrigger id={`${isNew ? "" : provider.id + "-"}state`}>
                  <SelectValue placeholder="Select state" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="AL">Alabama</SelectItem>
                  <SelectItem value="AK">Alaska</SelectItem>
                  <SelectItem value="AZ">Arizona</SelectItem>
                  <SelectItem value="AR">Arkansas</SelectItem>
                  <SelectItem value="CA">California</SelectItem>
                  <SelectItem value="CO">Colorado</SelectItem>
                  <SelectItem value="CT">Connecticut</SelectItem>
                  <SelectItem value="DE">Delaware</SelectItem>
                  <SelectItem value="FL">Florida</SelectItem>
                  <SelectItem value="GA">Georgia</SelectItem>
                  <SelectItem value="HI">Hawaii</SelectItem>
                  <SelectItem value="ID">Idaho</SelectItem>
                  <SelectItem value="IL">Illinois</SelectItem>
                  <SelectItem value="IN">Indiana</SelectItem>
                  <SelectItem value="IA">Iowa</SelectItem>
                  <SelectItem value="KS">Kansas</SelectItem>
                  <SelectItem value="KY">Kentucky</SelectItem>
                  <SelectItem value="LA">Louisiana</SelectItem>
                  <SelectItem value="ME">Maine</SelectItem>
                  <SelectItem value="MD">Maryland</SelectItem>
                  <SelectItem value="MA">Massachusetts</SelectItem>
                  <SelectItem value="MI">Michigan</SelectItem>
                  <SelectItem value="MN">Minnesota</SelectItem>
                  <SelectItem value="MS">Mississippi</SelectItem>
                  <SelectItem value="MO">Missouri</SelectItem>
                  <SelectItem value="MT">Montana</SelectItem>
                  <SelectItem value="NE">Nebraska</SelectItem>
                  <SelectItem value="NV">Nevada</SelectItem>
                  <SelectItem value="NH">New Hampshire</SelectItem>
                  <SelectItem value="NJ">New Jersey</SelectItem>
                  <SelectItem value="NM">New Mexico</SelectItem>
                  <SelectItem value="NY">New York</SelectItem>
                  <SelectItem value="NC">North Carolina</SelectItem>
                  <SelectItem value="ND">North Dakota</SelectItem>
                  <SelectItem value="OH">Ohio</SelectItem>
                  <SelectItem value="OK">Oklahoma</SelectItem>
                  <SelectItem value="OR">Oregon</SelectItem>
                  <SelectItem value="PA">Pennsylvania</SelectItem>
                  <SelectItem value="RI">Rhode Island</SelectItem>
                  <SelectItem value="SC">South Carolina</SelectItem>
                  <SelectItem value="SD">South Dakota</SelectItem>
                  <SelectItem value="TN">Tennessee</SelectItem>
                  <SelectItem value="TX">Texas</SelectItem>
                  <SelectItem value="UT">Utah</SelectItem>
                  <SelectItem value="VT">Vermont</SelectItem>
                  <SelectItem value="VA">Virginia</SelectItem>
                  <SelectItem value="WA">Washington</SelectItem>
                  <SelectItem value="WV">West Virginia</SelectItem>
                  <SelectItem value="WI">Wisconsin</SelectItem>
                  <SelectItem value="WY">Wyoming</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}zipCode`}>Zip Code</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}zipCode`}
                value={provider.zipCode}
                onChange={(e) => setProvider({ ...provider, zipCode: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}firstVisit`}>First Visit (MM/YYYY)</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}firstVisit`}
                placeholder="MM/YYYY"
                value={provider.firstVisit}
                onChange={(e) => setProvider({ ...provider, firstVisit: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}lastVisit`}>Last Visit (MM/YYYY)</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}lastVisit`}
                placeholder="MM/YYYY"
                value={provider.lastVisit}
                onChange={(e) => setProvider({ ...provider, lastVisit: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : provider.id + "-"}nextAppointment`}>Next Appointment (MM/YYYY)</Label>
              <Input
                id={`${isNew ? "" : provider.id + "-"}nextAppointment`}
                placeholder="MM/YYYY"
                value={provider.nextAppointment}
                onChange={(e) => setProvider({ ...provider, nextAppointment: e.target.value })}
              />
            </div>

{medications.length > 0 && (
              <div className="col-span-1 md:col-span-2 space-y-2">
                <Label>Which medications were prescribed by this provider?</Label>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-md p-3">
                  {medications.map((medication) => (
                    <div key={medication.id} className="flex items-center space-x-2">
                      <Checkbox
                        id={`${isNew ? "" : provider.id + "-"}medication-${medication.id}`}
                        checked={provider.medications?.includes(medication.id)}
                        onCheckedChange={(checked) => {
                          const currentMeds = provider.medications || []
                          if (checked) {
                            setProvider({
                              ...provider,
                              medications: [...currentMeds, medication.id],
                            })
                          } else {
                            setProvider({
                              ...provider,
                              medications: currentMeds.filter((id) => id !== medication.id),
                            })
                          }
                        }}
                      />
                      <Label
                        htmlFor={`${isNew ? "" : provider.id + "-"}medication-${medication.id}`}
                        className="text-sm"
                      >
                        {medication.name}
                      </Label>
                    </div>
                  ))}
                  {medications.length === 0 && (
                    <p className="text-sm text-muted-foreground">No medications added yet</p>
                  )}
                </div>
              </div>
            )}

<div className="col-span-1 md:col-span-2 space-y-2">
              <Label>
                If we send this doctor a form asking about your disability to support your claim, do you think they will
                fill it out?
              </Label>
              <div className="flex items-center gap-4 mt-2">
                <div className="flex items-center gap-2">
                  <input
                    type="radio"
                    id={`${isNew ? "" : provider.id + "-"}willFillForm-yes`}
                    checked={provider.willFillForm === true}
                    onChange={() => setProvider({ ...provider, willFillForm: true })}
                  />
                  <Label htmlFor={`${isNew ? "" : provider.id + "-"}willFillForm-yes`}>Yes</Label>
                </div>
                <div className="flex items-center gap-2">
                  <input
                    type="radio"
                    id={`${isNew ? "" : provider.id + "-"}willFillForm-no`}
                    checked={provider.willFillForm === false}
                    onChange={() => setProvider({ ...provider, willFillForm: false })}
                  />
                  <Label htmlFor={`${isNew ? "" : provider.id + "-"}willFillForm-no`}>No</Label>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={isNew ? () => setIsAddingProvider(false) : cancelEditing}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Cancel
          </Button>
          <Button onClick={isNew ? handleAddProvider : () => handleUpdateProvider(provider)}>
            <Save className="mr-2 h-4 w-4" />
            {isNew ? "Add Provider" : "Save Changes"}
          </Button>
        </CardFooter>
      </Card>
    )
  }

// Remove this line:
  // const [useEffectRan, setUseEffectRan] = useState(false)

if (isAddingProvider) {
    return renderProviderForm(newProvider, setNewProvider, true)
  }

if (editingProviderId) {
    const providerToEdit = providers.find((p) => p.id === editingProviderId)!
    return renderProviderForm(providerToEdit, (updatedProvider) => {
      // Create a temporary copy to avoid directly modifying the state
      const tempProvider = { ...providerToEdit, ...updatedProvider }
      handleUpdateProvider(tempProvider)
    })
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Healthcare Facilities</CardTitle>
        <CardDescription>List all healthcare providers who have treated your conditions</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {providers.length === 0 ? (
            <div className="text-center py-8 border border-dashed rounded-lg">
              <p className="text-muted-foreground">No providers added yet</p>
              <Button variant="outline" className="mt-4" onClick={() => setIsAddingProvider(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Provider
              </Button>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 gap-4">
                {providers.map((provider) => (
                  <Card key={provider.id} className="overflow-hidden">
                    <div className="p-4 flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <div>
                          <h3 className="font-medium text-base">{provider.facilityName || "Unknown Facility"}</h3>
                          <p className="text-sm text-muted-foreground">
                            {provider.firstName} {provider.lastName} •{" "}
                            {provider.type && PROVIDER_TYPE_NAMES[provider.type]
                              ? PROVIDER_TYPE_NAMES[provider.type]
                              : provider.type || "Provider"}
                          </p>
                        </div>
                        {provider.willFillForm !== null && (
                          <Badge variant={provider.willFillForm ? "success" : "secondary"} className="ml-2">
                            {provider.willFillForm ? "May support claim form" : "May not support claim form"}
                          </Badge>
                        )}
                      </div>
                      <div className="flex space-x-2">
                        <Button variant="ghost" size="icon" onClick={() => startEditing(provider)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" onClick={() => handleDeleteProvider(provider.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>

{/* Add this section to display test/treatments */}
                    {getProviderTestTreatments(provider.id).length > 0 && (
                      <div className="px-4 pb-4 pt-0">
                        <h4 className="text-sm font-medium mb-2">Tests & Treatments</h4>
                        <div className="space-y-1">
                          {getProviderTestTreatments(provider.id).map((test) => (
                            <div key={test.id} className="text-sm flex items-center justify-between">
                              <span>
                                {test.type} ({test.date})
                              </span>
                              <Badge variant="outline" className="ml-2">
                                {test.forBodySystem ? BODY_SYSTEM_NAMES[test.forBodySystem] : "Not specified"}
                              </Badge>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </Card>
                ))}
              </div>

<Button variant="outline" className="w-full" onClick={() => setIsAddingProvider(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Another Provider
              </Button>
            </>
          )}

{conditions.length > 0 && (
            <Dialog open={missingProviderTypesDialogOpen} onOpenChange={setMissingProviderTypesDialogOpen}>
              <DialogTrigger asChild>
                <Button variant="outline" className="w-full mt-4">
                  Check for Missing Provider Types
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Missing Provider Types</DialogTitle>
                  <DialogDescription>
                    Based on your conditions, you might need to add the following types of providers:
                  </DialogDescription>
                </DialogHeader>
                <div className="py-4">
                  {missingTypes.length > 0 ? (
                    <div className="space-y-2">
                      {missingTypes.map((type) => (
                        <div key={type} className="flex items-center">
                          <Checkbox id={`missing-${type}`} />
                          <Label htmlFor={`missing-${type}`} className="ml-2">
                            {PROVIDER_TYPE_NAMES[type] || type}
                          </Label>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p>You have added all the provider types needed for your conditions.</p>
                  )}
                </div>
                <DialogFooter>
                  <Button
                    onClick={() => {
                      setMissingProviderTypesDialogOpen(false)
                      // Add selected provider types functionality could be added here
                    }}
                  >
                    Close
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex justify-start">
        <Button variant="outline" onClick={onPrevious}>
          Previous: Medications
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/medications-section.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { Provider, Condition, Medication } from "./medical-information-form"
import { PlusCircle, Trash2, Edit, ArrowLeft, Save, Search } from "lucide-react"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

// Common medication names
const COMMON_MEDICATIONS = [
  "Acetaminophen (Tylenol)",
  "Adderall",
  "Albuterol",
  "Alprazolam (Xanax)",
  "Amitriptyline",
  "Amlodipine",
  "Amoxicillin",
  "Atenolol",
  "Atorvastatin (Lipitor)",
  "Azithromycin",
  "Bupropion (Wellbutrin)",
  "Citalopram (Celexa)",
  "Clonazepam (Klonopin)",
  "Cyclobenzaprine",
  "Diazepam (Valium)",
  "Duloxetine (Cymbalta)",
  "Escitalopram (Lexapro)",
  "Fluoxetine (Prozac)",
  "Furosemide (Lasix)",
  "Gabapentin (Neurontin)",
  "Hydrochlorothiazide",
  "Hydroxyzine",
  "Ibuprofen (Advil, Motrin)",
  "Levothyroxine (Synthroid)",
  "Lisinopril",
  "Loratadine (Claritin)",
  "Lorazepam (Ativan)",
  "Losartan",
  "Meloxicam",
  "Metformin",
  "Metoprolol",
  "Montelukast (Singulair)",
  "Naproxen (Aleve)",
  "Omeprazole (Prilosec)",
  "Ondansetron (Zofran)",
  "Oxycodone",
  "Pantoprazole (Protonix)",
  "Paroxetine (Paxil)",
  "Prednisone",
  "Propranolol",
  "Sertraline (Zoloft)",
  "Simvastatin (Zocor)",
  "Sumatriptan (Imitrex)",
  "Tamsulosin (Flomax)",
  "Tramadol",
  "Trazodone",
  "Venlafaxine (Effexor)",
  "Zolpidem (Ambien)",
  "Other",
]

interface MedicationsSectionProps {
  medications: Medication[]
  setMedications: (medications: Medication[]) => void
  providers: Provider[]
  conditions: Condition[]
  onPrevious: () => void
  onNext: () => void
}

export function MedicationsSection({
  medications,
  setMedications,
  providers,
  conditions,
  onPrevious,
  onNext,
}: MedicationsSectionProps) {
  const [isAddingMedication, setIsAddingMedication] = useState(false)
  const [editingMedicationId, setEditingMedicationId] = useState<string | null>(null)
  const [newMedication, setNewMedication] = useState<Medication>({
    id: "",
    name: "",
    dosage: "",
    frequency: "",
    prescribedBy: "",
    forConditions: [],
  })
  const [medicationOpen, setMedicationOpen] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")

const handleAddMedication = () => {
    const medicationId = `medication-${Date.now()}`
    const medicationToAdd = {
      ...newMedication,
      id: medicationId,
    }

setMedications([...medications, medicationToAdd])
    setNewMedication({
      id: "",
      name: "",
      dosage: "",
      frequency: "",
      prescribedBy: "",
      forConditions: [],
    })
    setIsAddingMedication(false)
  }

const handleUpdateMedication = (medication: Medication) => {
    setMedications(medications.map((m) => (m.id === medication.id ? medication : m)))
    setEditingMedicationId(null)
  }

const handleDeleteMedication = (id: string) => {
    setMedications(medications.filter((medication) => medication.id !== id))
  }

const getPrescribingProvider = (providerId: string) => {
    return providers.find((provider) => provider.id === providerId)
  }

const getMedicationConditions = (medicationId: string) => {
    const medication = medications.find((m) => m.id === medicationId)
    if (!medication) return []

return conditions.filter((condition) => medication.forConditions.includes(condition.id))
  }

const startEditing = (medication: Medication) => {
    setEditingMedicationId(medication.id)
  }

const cancelEditing = () => {
    setEditingMedicationId(null)
  }

const filteredMedications = COMMON_MEDICATIONS.filter((med) => med.toLowerCase().includes(searchTerm.toLowerCase()))

const renderMedicationForm = (
    medication: Medication,
    setMedication: (medication: Medication) => void,
    isNew = false,
  ) => {
    return (
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>{isNew ? "Add Medication" : "Edit Medication"}</CardTitle>
          <CardDescription>
            {isNew ? "Enter the details of your medication" : "Update the details of your medication"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : medication.id + "-"}medicationName`}>Medication Name</Label>
              <Popover open={medicationOpen} onOpenChange={setMedicationOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={medicationOpen}
                    className="w-full justify-between"
                  >
                    {medication.name || "Search medications..."}
                    <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-[400px] p-0">
                  <Command>
                    <CommandInput
                      placeholder="Search medications..."
                      value={searchTerm}
                      onValueChange={setSearchTerm}
                    />
                    <CommandList>
                      <CommandEmpty>
                        {searchTerm ? (
                          <>
                            No medication found.
                            <Button
                              variant="link"
                              className="p-0 h-auto font-normal"
                              onClick={() => {
                                setMedication({ ...medication, name: searchTerm })
                                setMedicationOpen(false)
                                setSearchTerm("")
                              }}
                            >
                              Add "{searchTerm}"
                            </Button>
                          </>
                        ) : (
                          "Start typing to search medications"
                        )}
                      </CommandEmpty>
                      <CommandGroup>
                        {filteredMedications.map((med) => (
                          <CommandItem
                            key={med}
                            value={med}
                            onSelect={() => {
                              setMedication({ ...medication, name: med })
                              setMedicationOpen(false)
                              setSearchTerm("")
                            }}
                          >
                            <span>{med}</span>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>

{/* Dosage and Frequency fields are hidden as requested */}
            {/* <div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : medication.id + "-"}dosage`}>Dosage</Label>
              <Input
                id={`${isNew ? "" : medication.id + "-"}dosage`}
                value={medication.dosage}
                onChange={(e) => setMedication({ ...medication, dosage: e.target.value })}
                placeholder="e.g., 10mg, 500mg"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : medication.id + "-"}frequency`}>Frequency</Label>
              <Select
                value={medication.frequency}
                onValueChange={(value) => setMedication({ ...medication, frequency: value })}
              >
                <SelectTrigger id={`${isNew ? "" : medication.id + "-"}frequency`}>
                  <SelectValue placeholder="Select frequency" />
                </SelectTrigger>
                <SelectContent>
                  {MEDICATION_FREQUENCIES.map((freq) => (
                    <SelectItem key={freq} value={freq}>
                      {freq}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div> */}

{/* Prescribed by section - now enabled when providers are available */}
            {/* Prescribed by section removed as requested */}
            {/* {providers.length > 0 && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : medication.id + "-"}prescribedBy`}>Prescribed By</Label>
                <Select
                  value={medication.prescribedBy}
                  onValueChange={(value) => setMedication({ ...medication, prescribedBy: value })}
                >
                  <SelectTrigger id={`${isNew ? "" : medication.id + "-"}prescribedBy`}>
                    <SelectValue placeholder="Select prescribing provider" />
                  </SelectTrigger>
                  <SelectContent>
                    {providers.map((provider) => (
                      <SelectItem key={provider.id} value={provider.id}>
                        Dr. {provider.firstName} {provider.lastName}
                        {provider.type &&
                          ` (${provider.type.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())})`}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )} */}
            {/* Prescribed by section removed as requested */}

{conditions.length > 0 && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : medication.id + "-"}forConditions`}>For Condition</Label>
                <Select
                  value={medication.forConditions[0] || ""}
                  onValueChange={(value) => setMedication({ ...medication, forConditions: [value] })}
                >
                  <SelectTrigger id={`${isNew ? "" : medication.id + "-"}forConditions`}>
                    <SelectValue placeholder="Select condition" />
                  </SelectTrigger>
                  <SelectContent>
                    {conditions.map((condition) => (
                      <SelectItem key={condition.id} value={condition.id}>
                        {condition.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={isNew ? () => setIsAddingMedication(false) : cancelEditing}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Cancel
          </Button>
          <Button onClick={isNew ? handleAddMedication : () => handleUpdateMedication(medication)}>
            <Save className="mr-2 h-4 w-4" />
            {isNew ? "Add Medication" : "Save Changes"}
          </Button>
        </CardFooter>
      </Card>
    )
  }

if (isAddingMedication) {
    return renderMedicationForm(newMedication, setNewMedication, true)
  }

if (editingMedicationId) {
    const medicationToEdit = medications.find((m) => m.id === editingMedicationId)!
    return renderMedicationForm(medicationToEdit, (updatedMedication) => {
      // Create a temporary copy to avoid directly modifying the state
      const tempMedication = { ...medicationToEdit, ...updatedMedication }
      handleUpdateMedication(tempMedication)
    })
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Medications</CardTitle>
        <CardDescription>List all medications you are currently taking.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {medications.length === 0 ? (
            <div className="text-center py-8 border border-dashed rounded-lg">
              <p className="text-muted-foreground">No medications added yet</p>
              <Button variant="outline" className="mt-4" onClick={() => setIsAddingMedication(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Medication
              </Button>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 gap-4">
                {medications.map((medication) => (
                  <Card key={medication.id} className="overflow-hidden">
                    <div className="p-4 flex items-center justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-medium text-base">{medication.name}</h3>
                          {/* Hide dosage and frequency in the display as well */}
                          {/* <span className="text-sm text-muted-foreground">
                            {medication.dosage} • {medication.frequency}
                          </span> */}
                        </div>
                        <div className="flex flex-wrap gap-2 text-sm">
                          <span className="text-muted-foreground">Prescribed by:</span>
                          <span>
                            {medication.prescribedBy
                              ? `Dr. ${getPrescribingProvider(medication.prescribedBy)?.lastName || "Unknown"}`
                              : "Not specified"}
                          </span>
                          <span className="text-muted-foreground ml-2">•</span>
                          <span className="text-muted-foreground">For:</span>
                          {getMedicationConditions(medication.id).length > 0 ? (
                            getMedicationConditions(medication.id).map((condition) => (
                              <span key={condition.id} className="text-sm">
                                {condition.name}
                                {getMedicationConditions(medication.id).indexOf(condition) <
                                getMedicationConditions(medication.id).length - 1
                                  ? ","
                                  : ""}
                              </span>
                            ))
                          ) : (
                            <span className="text-muted-foreground">None specified</span>
                          )}
                        </div>
                      </div>
                      <div className="flex space-x-2 ml-4">
                        <Button variant="ghost" size="icon" onClick={() => startEditing(medication)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" onClick={() => handleDeleteMedication(medication.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>

import type { Provider, Condition, Medication, Examination } from "./medical-information-form"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Activity, User, Pill, FileText } from "lucide-react"

interface RelationshipsViewProps {
  providers: Provider[]
  conditions: Condition[]
  medications: Medication[]
  examinations: Examination[]
}

export function RelationshipsView({ providers, conditions, medications, examinations }: RelationshipsViewProps) {
  // Helper functions to get related items
  const getProviderConditions = (providerId: string) => {
    return conditions.filter((condition) => condition.providers.includes(providerId))
  }

const getConditionProviders = (conditionId: string) => {
    return providers.filter((provider) => conditions.find((c) => c.id === conditionId)?.providers.includes(provider.id))
  }

const getConditionMedications = (conditionId: string) => {
    return medications.filter((medication) => medication.forConditions.includes(conditionId))
  }

const getConditionExaminations = (conditionId: string) => {
    return examinations.filter((examination) => examination.forConditions.includes(conditionId))
  }

return (
    <Tabs defaultValue="by-condition" className="w-full">
      <TabsList className="grid grid-cols-2 mb-4">
        <TabsTrigger value="by-condition">Conditions</TabsTrigger>
        <TabsTrigger value="by-provider">Providers</TabsTrigger>
      </TabsList>

<TabsContent value="by-condition">
        {conditions.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-4">Add conditions to see their relationships</p>
        ) : (
          <div className="space-y-3">
            {conditions.map((condition) => (
              <Card key={condition.id} className="overflow-hidden">
                <CardContent className="p-3">
                  <div className="flex items-center gap-2 mb-2">
                    <Activity className="h-4 w-4 text-primary" />
                    <h3 className="font-medium text-sm">{condition.name}</h3>
                  </div>

<div className="text-xs space-y-1 text-muted-foreground">
                    <div className="flex items-start gap-1">
                      <User className="h-3 w-3 mt-0.5" />
                      <span>
                        {getConditionProviders(condition.id).length > 0
                          ? getConditionProviders(condition.id)
                              .map((p) => `Dr. ${p.lastName}`)
                              .join(", ")
                          : "No providers"}
                      </span>
                    </div>

<div className="flex items-start gap-1">
                      <Pill className="h-3 w-3 mt-0.5" />
                      <span>
                        {getConditionMedications(condition.id).length > 0
                          ? getConditionMedications(condition.id)
                              .map((m) => m.name)
                              .join(", ")
                          : "No medications"}
                      </span>
                    </div>

<div className="flex items-start gap-1">
                      <FileText className="h-3 w-3 mt-0.5" />
                      <span>
                        {getConditionExaminations(condition.id).length > 0
                          ? `${getConditionExaminations(condition.id).length} tests`
                          : "No examinations"}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </TabsContent>

<TabsContent value="by-provider">
        {providers.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-4">Add providers to see their relationships</p>
        ) : (
          <div className="space-y-3">
            {providers.map((provider) => (
              <Card key={provider.id} className="overflow-hidden">
                <CardContent className="p-3">
                  <div className="flex items-center gap-2 mb-2">
                    <User className="h-4 w-4 text-primary" />
                    <h3 className="font-medium text-sm">Dr. {provider.lastName}</h3>
                  </div>

<div className="text-xs space-y-1 text-muted-foreground">
                    <div className="flex items-start gap-1">
                      <Activity className="h-3 w-3 mt-0.5" />
                      <span>
                        {getProviderConditions(provider.id).length > 0
                          ? getProviderConditions(provider.id)
                              .map((c) => c.name)
                              .join(", ")
                          : "No conditions"}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { MedicalInformationForm } from "@/components/medical-information-form"

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Intake- Medical Information</h1>
          <p className="mt-2 text-lg text-gray-600">Enter medical information for section 7, 8 and 9 of SSA form</p>
        </div>
        <MedicalInformationForm />
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/examinations-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { Provider, Condition, Examination } from "./medical-information-form"
import { PlusCircle, Trash2, Edit, ArrowLeft, Save } from "lucide-react"

interface ExaminationsSectionProps {
  examinations: Examination[]
  setExaminations: (examinations: Examination[]) => void
  providers: Provider[]
  conditions: Condition[]
  onPrevious: () => void
}

export function ExaminationsSection({
  examinations,
  setExaminations,
  providers,
  conditions,
  onPrevious,
}: ExaminationsSectionProps) {
  const [isAddingExamination, setIsAddingExamination] = useState(false)
  const [editingExaminationId, setEditingExaminationId] = useState<string | null>(null)
  const [newExamination, setNewExamination] = useState<Examination>({
    id: "",
    type: "",
    date: "",
    orderedBy: "",
    forConditions: [],
    bodyPart: "",
    otherSpecification: "",
  })

const handleAddExamination = () => {
    const examinationId = `examination-${Date.now()}`
    const examinationToAdd = {
      ...newExamination,
      id: examinationId,
    }

setExaminations([...examinations, examinationToAdd])
    setNewExamination({
      id: "",
      type: "",
      date: "",
      orderedBy: "",
      forConditions: [],
      bodyPart: "",
      otherSpecification: "",
    })
    setIsAddingExamination(false)
  }

const handleUpdateExamination = (examination: Examination) => {
    setExaminations(examinations.map((e) => (e.id === examination.id ? examination : e)))
    setEditingExaminationId(null)
  }

const handleDeleteExamination = (id: string) => {
    setExaminations(examinations.filter((examination) => examination.id !== examination.id))
  }

const getOrderingProvider = (providerId: string) => {
    return providers.find((provider) => provider.id === providerId)
  }

const getExaminationConditions = (examinationId: string) => {
    const examination = examinations.find((e) => e.id === examinationId)
    if (!examination) return []

return conditions.filter((condition) => examination.forConditions.includes(condition.id))
  }

const needsBodyPart = (type: string) => {
    return ["biopsy", "mri-ct-scan", "x-ray"].includes(type)
  }

const getDisplayType = (examination: Examination) => {
    if (needsBodyPart(examination.type) && examination.bodyPart) {
      const typeMap: Record<string, string> = {
        biopsy: "Biopsy",
        "mri-ct-scan": "MRI/CT Scan",
        "x-ray": "X-ray",
      }
      return `${typeMap[examination.type]} (${examination.bodyPart})`
    }

if (examination.type === "other" && examination.otherSpecification) {
      return `Other: ${examination.otherSpecification}`
    }

const typeLabels: Record<string, string> = {
      "blood-test": "Blood test (not HIV)",
      "breathing-test": "Breathing test",
      "cardiac-catheterization": "Cardiac catheterization",
      eeg: "EEG (brain wave test)",
      ekg: "EKG (heart test)",
      "hearing-test": "Hearing test",
      "hiv-test": "HIV test",
      "speech-language-test": "Speech/language test",
      treadmill: "Treadmill (exercise test)",
      "vision-test": "Vision test",
      "psychological-test": "Psychological/IQ test",
    }

return typeLabels[examination.type] || examination.type
  }

const startEditing = (examination: Examination) => {
    setEditingExaminationId(examination.id)
  }

const cancelEditing = () => {
    setEditingExaminationId(null)
  }

const renderExaminationForm = (
    examination: Examination,
    setExamination: (examination: Examination) => void,
    isNew = false,
  ) => {
    return (
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>{isNew ? "Add Medical Examination" : "Edit Medical Examination"}</CardTitle>
          <CardDescription>
            {isNew
              ? "Enter the details of your medical examination or test"
              : "Update the details of your medical examination or test"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : examination.id + "-"}examinationType`}>Examination Type</Label>
              <Select
                value={examination.type}
                onValueChange={(value) => setExamination({ ...examination, type: value })}
              >
                <SelectTrigger id={`${isNew ? "" : examination.id + "-"}examinationType`}>
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="blood-test">Blood test (not HIV)</SelectItem>
                  <SelectItem value="breathing-test">Breathing test</SelectItem>
                  <SelectItem value="cardiac-catheterization">Cardiac catheterization</SelectItem>
                  <SelectItem value="eeg">EEG (brain wave test)</SelectItem>
                  <SelectItem value="ekg">EKG (heart test)</SelectItem>
                  <SelectItem value="hearing-test">Hearing test</SelectItem>
                  <SelectItem value="hiv-test">HIV test</SelectItem>
                  <SelectItem value="speech-language-test">Speech/language test</SelectItem>
                  <SelectItem value="treadmill">Treadmill (exercise test)</SelectItem>
                  <SelectItem value="vision-test">Vision test</SelectItem>
                  <SelectItem value="psychological-test">Psychological/IQ test</SelectItem>
                  <SelectItem value="biopsy">Biopsy</SelectItem>
                  <SelectItem value="mri-ct-scan">MRI/CT scan</SelectItem>
                  <SelectItem value="x-ray">X-ray</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
            </div>

{needsBodyPart(examination.type) && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : examination.id + "-"}bodyPart`}>Body Part</Label>
                <Input
                  id={`${isNew ? "" : examination.id + "-"}bodyPart`}
                  value={examination.bodyPart || ""}
                  onChange={(e) => setExamination({ ...examination, bodyPart: e.target.value })}
                  placeholder="e.g., Spine, Knee, Lung"
                />
              </div>
            )}

{examination.type === "other" && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : examination.id + "-"}otherSpecification`}>Please specify</Label>
                <Input
                  id={`${isNew ? "" : examination.id + "-"}otherSpecification`}
                  value={examination.otherSpecification || ""}
                  onChange={(e) => setExamination({ ...examination, otherSpecification: e.target.value })}
                  placeholder="Specify the examination type"
                />
              </div>
            )}

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : examination.id + "-"}examinationDate`}>Date (MM/YYYY)</Label>
              <Input
                id={`${isNew ? "" : examination.id + "-"}examinationDate`}
                value={examination.date}
                onChange={(e) => setExamination({ ...examination, date: e.target.value })}
                placeholder="MM/YYYY"
              />
            </div>

{providers.length > 0 && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : examination.id + "-"}orderedBy`}>Ordered By</Label>
                <Select
                  value={examination.orderedBy}
                  onValueChange={(value) => setExamination({ ...examination, orderedBy: value })}
                >
                  <SelectTrigger id={`${isNew ? "" : examination.id + "-"}orderedBy`}>
                    <SelectValue placeholder="Select provider" />
                  </SelectTrigger>
                  <SelectContent>
                    {providers.map((provider) => (
                      <SelectItem key={provider.id} value={provider.id}>
                        Dr. {provider.firstName} {provider.lastName}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}

{conditions.length > 0 && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : examination.id + "-"}forConditions`}>For Condition</Label>
                <Select
                  value={examination.forConditions[0] || ""}
                  onValueChange={(value) => setExamination({ ...examination, forConditions: [value] })}
                >
                  <SelectTrigger id={`${isNew ? "" : examination.id + "-"}forConditions`}>
                    <SelectValue placeholder="Select condition" />
                  </SelectTrigger>
                  <SelectContent>
                    {conditions.map((condition) => (
                      <SelectItem key={condition.id} value={condition.id}>
                        {condition.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={isNew ? () => setIsAddingExamination(false) : cancelEditing}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Cancel
          </Button>
          <Button onClick={isNew ? handleAddExamination : () => handleUpdateExamination(examination)}>
            <Save className="mr-2 h-4 w-4" />
            {isNew ? "Add Examination" : "Save Changes"}
          </Button>
        </CardFooter>
      </Card>
    )
  }

if (isAddingExamination) {
    return renderExaminationForm(newExamination, setNewExamination, true)
  }

if (editingExaminationId) {
    const examinationToEdit = examinations.find((e) => e.id === editingExaminationId)!
    return renderExaminationForm(examinationToEdit, (updatedExamination) => {
      // Create a temporary copy to avoid directly modifying the state
      const tempExamination = { ...examinationToEdit, ...updatedExamination }
      handleUpdateExamination(tempExamination)
    })
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Medical Examinations</CardTitle>
        <CardDescription>List all medical tests and examinations performed.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {examinations.length === 0 ? (
            <div className="text-center py-8 border border-dashed rounded-lg">
              <p className="text-muted-foreground">No examinations added yet</p>
              <Button variant="outline" className="mt-4" onClick={() => setIsAddingExamination(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Examination
              </Button>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 gap-4">
                {examinations.map((examination) => (
                  <Card key={examination.id} className="overflow-hidden">
                    <div className="p-4 flex items-center justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-medium text-base">{getDisplayType(examination)}</h3>
                          <span className="text-sm text-muted-foreground">{examination.date}</span>
                        </div>
                        <div className="flex flex-wrap gap-2 text-sm">
                          <span className="text-muted-foreground">Ordered by:</span>
                          <span>
                            {examination.orderedBy
                              ? `Dr. ${getOrderingProvider(examination.orderedBy)?.lastName || "Unknown"}`
                              : "Not specified"}
                          </span>
                          <span className="text-muted-foreground ml-2">•</span>
                          <span className="text-muted-foreground">For:</span>
                          {getExaminationConditions(examination.id).length > 0 ? (
                            getExaminationConditions(examination.id).map((condition) => (
                              <span key={condition.id} className="text-sm">
                                {condition.name}
                                {getExaminationConditions(examination.id).indexOf(condition) <
                                getExaminationConditions(examination.id).length - 1
                                  ? ","
                                  : ""}
                              </span>
                            ))
                          ) : (
                            <span className="text-muted-foreground">None specified</span>
                          )}
                        </div>
                      </div>
                      <div className="flex space-x-2 ml-4">
                        <Button variant="ghost" size="icon" onClick={() => startEditing(examination)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" onClick={() => handleDeleteExamination(examination.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>

<Button variant="outline" className="w-full" onClick={() => setIsAddingExamination(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Another Examination
              </Button>
            </>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex justify-start">
        <Button variant="outline" onClick={onPrevious}>
          Previous: Medications
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/test-treatment-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { Provider, Condition, TestTreatment, BodySystem } from "./medical-information-form"
import { PlusCircle, Trash2, Edit, ArrowLeft, Save } from "lucide-react"

// Export the body system to treatments mapping for use in other components
export const BODY_SYSTEM_TO_TREATMENTS: Record<BodySystem, string[]> = {
  musculoskeletal: [
    "Imaging (CT scan, MRI, X-ray)",
    "Assistive device (cane, walker, wheelchair)",
    "At home treatment (TENS, heat, cold)",
    "Occupational therapy (OT) or physical therapy (PT)",
    "Pain management",
  ],
  vision: [
    "Vision tests (visual acuity, visual field, dilated)",
    "Vision correction or aids (glasses, contacts, magnifying glass)",
    "Imaging (CT scan, MRI)",
    "Tonometry (for glaucoma or other conditions)",
    "Surgery",
  ],
  hearing: [
    "Hearing test",
    "Imaging (CT scan, MRI)",
    "Rotational chair test",
    "Surgery",
    "Occupational therapy (OT) or physical therapy (PT)",
  ],
  speech: [
    "Speech evaluation",
    "Occupational therapy (OT) or physical therapy (PT)",
    "Imaging (CT scan, MRI)",
    "Surgery",
    "Hearing test",
  ],
  respiratory: [
    "Breathing tests (PFTs, spirometry, peak flow)",
    "Imaging (CT scan, MRI, X-ray)",
    "Oxygen (supplemental oxygen/oxygen therapy)",
    "Inhaler",
    "CPAP",
  ],
  cardiovascular: [
    "ECG (EKG)",
    "Echocardiogram (ECHO)",
    "Stress test",
    "Cardiac catheterization",
    "Blood pressure test",
  ],
  digestive: [
    "Digestive/Gastrointestinal test (colonoscopy, endoscopy)",
    "Imaging (CT scan, MRI, X-ray)",
    "Barium x-ray",
    "Liver function tests",
    "GI procedure (colostomy, bowel resection)",
  ],
  genitourinary: [
    "Urinalysis (urine test)",
    "Imaging (CT scan, MRI, X-ray)",
    "Ultrasound",
    "Glomerular filtration rate (GFR or EGFR)",
    "Dialysis",
  ],
  hematological: [
    "Blood test (complete blood count/CBC)",
    "Blood transfusion",
    "CD4 count (type of T cell count)",
    "Imaging (CT scan, MRI)",
    "Antibody test",
  ],
  skin: ["Biopsy", "Antibody test", "Blood test for inflammation (CRP or ESR)", "Surgery", "Pain management"],
  endocrine: [
    "Thyroid tests (TSH or T4)",
    "Glucose test",
    "Hemoglobin A1C (HbA1C or A1C)",
    "Imaging (CT scan, MRI)",
    "Blood test",
  ],
  congenital: [
    "Karyotype analysis",
    "Evaluation",
    "Blood test",
    "Special education (when in school)",
    "Imaging (CT scan, MRI)",
  ],
  neurological: [
    "EEG (electroencephalogram)",
    "EMG (electromyography)",
    "Nerve conduction study",
    "Imaging (CT scan, MRI)",
    "Lumbar puncture (spinal tap)",
  ],
  mental: [
    "Psychiatric exam (evaluation)",
    "Therapy (talk therapy, cognitive behavioral)",
    "IQ test",
    "Evaluation",
    "fMRI (functional MRI)",
  ],
  cancer: [
    "Biopsy",
    "Imaging (CT scan, MRI, PET)",
    "Cancer treatment (chemotherapy, radiation)",
    "Blood test",
    "Surgery",
  ],
  immune: [
    "Antibody test (including ANA and rheumatoid factor/RF)",
    "Blood test for inflammation (CRP or ESR)",
    "Blood test",
    "Imaging (CT scan, MRI)",
    "CD4 count (type of T cell count)",
  ],
}

interface TestTreatmentSectionProps {
  testTreatments: TestTreatment[]
  setTestTreatments: (testTreatments: TestTreatment[]) => void
  providers: Provider[]
  conditions: Condition[]
  onNext: () => void
  onPrevious: () => void
}

export function TestTreatmentSection({
  testTreatments,
  setTestTreatments,
  providers,
  conditions,
  onNext,
  onPrevious,
}: TestTreatmentSectionProps) {
  const [isAddingTestTreatment, setIsAddingTestTreatment] = useState(false)
  const [editingTestTreatmentId, setEditingTestTreatmentId] = useState<string | null>(null)
  const [newTestTreatment, setNewTestTreatment] = useState<TestTreatment>({
    id: "",
    type: "",
    date: "",
    orderedBy: "",
    forBodySystem: null,
    bodyPart: "",
    otherSpecification: "",
  })

const handleAddTestTreatment = () => {
    const testTreatmentId = `test-treatment-${Date.now()}`
    const testTreatmentToAdd = {
      ...newTestTreatment,
      id: testTreatmentId,
    }

setTestTreatments([...testTreatments, testTreatmentToAdd])
    setNewTestTreatment({
      id: "",
      type: "",
      date: "",
      orderedBy: "",
      forBodySystem: null,
      bodyPart: "",
      otherSpecification: "",
    })
    setIsAddingTestTreatment(false)
  }

const handleUpdateTestTreatment = (testTreatment: TestTreatment) => {
    setTestTreatments(testTreatments.map((t) => (t.id === testTreatment.id ? testTreatment : t)))
    setEditingTestTreatmentId(null)
  }

const handleDeleteTestTreatment = (id: string) => {
    setTestTreatments(testTreatments.filter((testTreatment) => testTreatment.id !== id))
  }

const getOrderingProvider = (providerId: string) => {
    return providers.find((provider) => provider.id === providerId)
  }

const getDisplayType = (testTreatment: TestTreatment) => {
    return testTreatment.type === "Other" && testTreatment.otherSpecification
      ? `Other: ${testTreatment.otherSpecification}`
      : testTreatment.type
  }

const startEditing = (testTreatment: TestTreatment) => {
    setEditingTestTreatmentId(testTreatment.id)
  }

const cancelEditing = () => {
    setEditingTestTreatmentId(null)
  }

// Get providers with body systems
  const providersWithBodySystems = providers.filter((p) => p.bodySystems && p.bodySystems.length > 0)

// Get all unique body systems from providers
  const availableBodySystems = [...new Set(providersWithBodySystems.flatMap((p) => p.bodySystems))]

const renderTestTreatmentForm = (
    testTreatment: TestTreatment,
    setTestTreatment: (testTreatment: TestTreatment) => void,
    isNew = false,
  ) => {
    // Get providers that handle the selected body system
    const relevantProviders = testTreatment.forBodySystem
      ? providers.filter((p) => p.bodySystems.includes(testTreatment.forBodySystem))
      : []

// Get treatments for the selected body system
    const relevantTreatments = testTreatment.forBodySystem
      ? BODY_SYSTEM_TO_TREATMENTS[testTreatment.forBodySystem] || []
      : []

return (
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>{isNew ? "Add Test or Treatment" : "Edit Test or Treatment"}</CardTitle>
          <CardDescription>
            {isNew
              ? "Enter the details of your medical test or treatment"
              : "Update the details of your medical test or treatment"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : testTreatment.id + "-"}bodySystem`}>Body System</Label>
              <Select
                value={testTreatment.forBodySystem || ""}
                onValueChange={(value) => setTestTreatment({ ...testTreatment, forBodySystem: value as BodySystem })}
              >
                <SelectTrigger id={`${isNew ? "" : testTreatment.id + "-"}bodySystem`}>
                  <SelectValue placeholder="Select body system" />
                </SelectTrigger>
                <SelectContent>
                  {availableBodySystems.map((system) => (
                    <SelectItem key={system} value={system}>
                      {BODY_SYSTEM_NAMES[system]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{testTreatment.forBodySystem && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : testTreatment.id + "-"}testTreatmentType`}>
                  Test or Treatment Type
                </Label>
                <Select
                  value={testTreatment.type}
                  onValueChange={(value) => setTestTreatment({ ...testTreatment, type: value })}
                >
                  <SelectTrigger id={`${isNew ? "" : testTreatment.id + "-"}testTreatmentType`}>
                    <SelectValue placeholder="Select type" />
                  </SelectTrigger>
                  <SelectContent>
                    {relevantTreatments.map((treatment) => (
                      <SelectItem key={treatment} value={treatment}>
                        {treatment}
                      </SelectItem>
                    ))}
                    <SelectItem value="Other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            )}

{testTreatment.type === "Other" && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : testTreatment.id + "-"}otherSpecification`}>Please specify</Label>
                <Input
                  id={`${isNew ? "" : testTreatment.id + "-"}otherSpecification`}
                  value={testTreatment.otherSpecification || ""}
                  onChange={(e) => setTestTreatment({ ...testTreatment, otherSpecification: e.target.value })}
                  placeholder="Specify the test or treatment type"
                />
              </div>
            )}

<div className="space-y-2">
              <Label htmlFor={`${isNew ? "" : testTreatment.id + "-"}testTreatmentDate`}>Date (MM/YYYY)</Label>
              <Input
                id={`${isNew ? "" : testTreatment.id + "-"}testTreatmentDate`}
                value={testTreatment.date}
                onChange={(e) => setTestTreatment({ ...testTreatment, date: e.target.value })}
                placeholder="MM/YYYY"
              />
            </div>

{relevantProviders.length > 0 && (
              <div className="space-y-2">
                <Label htmlFor={`${isNew ? "" : testTreatment.id + "-"}orderedBy`}>Ordered By</Label>
                <Select
                  value={testTreatment.orderedBy}
                  onValueChange={(value) => setTestTreatment({ ...testTreatment, orderedBy: value })}
                >
                  <SelectTrigger id={`${isNew ? "" : testTreatment.id + "-"}orderedBy`}>
                    <SelectValue placeholder="Select provider" />
                  </SelectTrigger>
                  <SelectContent>
                    {relevantProviders.map((provider) => (
                      <SelectItem key={provider.id} value={provider.id}>
                        Dr. {provider.firstName} {provider.lastName}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={isNew ? () => setIsAddingTestTreatment(false) : cancelEditing}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Cancel
          </Button>
          <Button onClick={isNew ? handleAddTestTreatment : () => handleUpdateTestTreatment(testTreatment)}>
            <Save className="mr-2 h-4 w-4" />
            {isNew ? "Add Test/Treatment" : "Save Changes"}
          </Button>
        </CardFooter>
      </Card>
    )
  }

if (isAddingTestTreatment) {
    return renderTestTreatmentForm(newTestTreatment, setNewTestTreatment, true)
  }

if (editingTestTreatmentId) {
    const testTreatmentToEdit = testTreatments.find((t) => t.id === editingTestTreatmentId)!
    return renderTestTreatmentForm(testTreatmentToEdit, (updatedTestTreatment) => {
      // Create a temporary copy to avoid directly modifying the state
      const tempTestTreatment = { ...testTreatmentToEdit, ...updatedTestTreatment }
      handleUpdateTestTreatment(tempTestTreatment)
    })
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Tests and Treatments</CardTitle>
        <CardDescription>List all medical tests and examinations performed.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {testTreatments.length === 0 ? (
            <div className="text-center py-8 border border-dashed rounded-lg">
              <p className="text-muted-foreground">No tests or treatments added yet</p>
              <Button variant="outline" className="mt-4" onClick={() => setIsAddingTestTreatment(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Test/Treatment
              </Button>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 gap-4">
                {testTreatments.map((testTreatment) => (
                  <Card key={testTreatment.id} className="overflow-hidden">
                    <div className="p-4 flex items-center justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-medium text-base">{getDisplayType(testTreatment)}</h3>
                          <span className="text-sm text-muted-foreground">{testTreatment.date}</span>
                        </div>
                        <div className="flex flex-wrap gap-2 text-sm">
                          <span className="text-muted-foreground">Ordered by:</span>
                          <span>
                            {testTreatment.orderedBy
                              ? `Dr. ${getOrderingProvider(testTreatment.orderedBy)?.lastName || "Unknown"}`
                              : "Not specified"}
                          </span>
                          <span className="text-muted-foreground ml-2">•</span>
                          <span className="text-muted-foreground">For:</span>
                          <span>
                            {testTreatment.forBodySystem
                              ? BODY_SYSTEM_NAMES[testTreatment.forBodySystem]
                              : "Not specified"}
                          </span>
                        </div>
                      </div>
                      <div className="flex space-x-2 ml-4">
                        <Button variant="ghost" size="icon" onClick={() => startEditing(testTreatment)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" onClick={() => handleDeleteTestTreatment(testTreatment.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>

<Button variant="outline" className="w-full" onClick={() => setIsAddingTestTreatment(true)}>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Another Test/Treatment
              </Button>
            </>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={onPrevious}>
          Previous: Conditions
        </Button>
        <Button onClick={onNext}>Next: Medications</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/personal-details-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardFooter, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { PersonalDetails } from "./medical-information-form"

interface PersonalDetailsFormProps {
  personalDetails: PersonalDetails
  setPersonalDetails: (details: PersonalDetails) => void
  onNext: () => void
}

export function PersonalDetailsForm({ personalDetails, setPersonalDetails, onNext }: PersonalDetailsFormProps) {
  const updateField = (field: keyof PersonalDetails, value: any) => {
    setPersonalDetails({
      ...personalDetails,
      [field]: value,
    })
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Personal Details</CardTitle>
        <CardDescription>Please provide your basic information</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-2">
            <Label htmlFor="heightFeet" className="text-base">
              Height (Feet) <span className="text-red-500">*</span>
            </Label>
            <Input
              id="heightFeet"
              type="number"
              placeholder="5"
              value={personalDetails.heightFeet}
              onChange={(e) => updateField("heightFeet", e.target.value)}
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="heightInches" className="text-base">
              Height (Inches) <span className="text-red-500">*</span>
            </Label>
            <Input
              id="heightInches"
              type="number"
              placeholder="10"
              value={personalDetails.heightInches}
              onChange={(e) => updateField("heightInches", e.target.value)}
              required
            />
          </div>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-2">
            <Label htmlFor="weight" className="text-base">
              Weight (lbs) <span className="text-red-500">*</span>
            </Label>
            <Input
              id="weight"
              type="number"
              placeholder="160"
              value={personalDetails.weight}
              onChange={(e) => updateField("weight", e.target.value)}
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="ethnicity" className="text-base">
              Ethnicity <span className="text-red-500">*</span>
            </Label>
            <Select value={personalDetails.ethnicity} onValueChange={(value) => updateField("ethnicity", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select ethnicity" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="american-indian">American Indian or Alaska Native</SelectItem>
                <SelectItem value="asian">Asian</SelectItem>
                <SelectItem value="black">Black or African American</SelectItem>
                <SelectItem value="hispanic">Hispanic or Latino</SelectItem>
                <SelectItem value="native-hawaiian">Native Hawaiian or Other Pacific Islander</SelectItem>
                <SelectItem value="white">White</SelectItem>
                <SelectItem value="other">Other</SelectItem>
                <SelectItem value="prefer-not-to-say">Prefer not to say</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-2">
            <Label htmlFor="gender" className="text-base">
              Gender at Birth
            </Label>
            <Select value={personalDetails.gender} onValueChange={(value) => updateField("gender", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select gender" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="male">Male</SelectItem>
                <SelectItem value="female">Female</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

<div className="space-y-4">
          <div className="flex items-center justify-between">
            <Label htmlFor="hasInsurance" className="text-base">
              Do you have health insurance?
            </Label>
            <div className="flex items-center gap-2">
              <Label htmlFor="hasInsurance-yes" className="text-sm">
                Yes
              </Label>
              <input
                type="radio"
                id="hasInsurance-yes"
                checked={personalDetails.hasInsurance === true}
                onChange={() => updateField("hasInsurance", true)}
                className="mr-4"
              />
              <Label htmlFor="hasInsurance-no" className="text-sm">
                No
              </Label>
              <input
                type="radio"
                id="hasInsurance-no"
                checked={personalDetails.hasInsurance === false}
                onChange={() => updateField("hasInsurance", false)}
              />
            </div>
          </div>

<div className="flex items-center justify-between">
            <Label htmlFor="affectsVision" className="text-base">
              Does your vision impact your ability to work?
            </Label>
            <div className="flex items-center gap-2">
              <Label htmlFor="affectsVision-yes" className="text-sm">
                Yes
              </Label>
              <input
                type="radio"
                id="affectsVision-yes"
                checked={personalDetails.affectsVision === true}
                onChange={() => updateField("affectsVision", true)}
                className="mr-4"
              />
              <Label htmlFor="affectsVision-no" className="text-sm">
                No
              </Label>
              <input
                type="radio"
                id="affectsVision-no"
                checked={personalDetails.affectsVision === false}
                onChange={() => updateField("affectsVision", false)}
              />
            </div>
          </div>

<div className="flex items-center justify-between">
            <Label htmlFor="doctorRecommended" className="text-base">
              Did any of your doctors recommend you apply for disability benefits?
            </Label>
            <div className="flex items-center gap-2">
              <Label htmlFor="doctorRecommended-yes" className="text-sm">
                Yes
              </Label>
              <input
                type="radio"
                id="doctorRecommended-yes"
                checked={personalDetails.doctorRecommended === true}
                onChange={() => updateField("doctorRecommended", true)}
                className="mr-4"
              />
              <Label htmlFor="doctorRecommended-no" className="text-sm">
                No
              </Label>
              <input
                type="radio"
                id="doctorRecommended-no"
                checked={personalDetails.doctorRecommended === false}
                onChange={() => updateField("doctorRecommended", false)}
              />
            </div>
          </div>
        </div>

<div className="space-y-4 mt-6">
          <div className="space-y-2">
            <Label htmlFor="typicalDay" className="text-base">
              Tell us about your daily routine
            </Label>
            <div className="text-sm text-muted-foreground mb-2">
              Please include your morning activities, afternoon tasks, and evening routine. Focus on how your conditions
              affect these activities.
            </div>
            <textarea
              id="typicalDay"
              className="w-full min-h-[150px] p-3 border rounded-md"
              value={personalDetails.typicalDay || ""}
              onChange={(e) => updateField("typicalDay", e.target.value)}
              placeholder="For example: In the morning, I have difficulty getting out of bed due to pain... During the afternoon, I need to rest frequently... In the evening, I require assistance with..."
            />
          </div>