"use client";

import type { PatientData } from "@/lib/types";
import { Target, TrendingUp, TrendingDown, Minus, CheckCircle } from "lucide-react";

export function CarePlanTab({ data }: { data: PatientData }) {
  const trendIcon = (trend: string | null) => {
    switch (trend) {
      case "up": return <TrendingUp size={12} className="text-red-500" />;
      case "down": return <TrendingDown size={12} className="text-green-500" />;
      default: return <Minus size={12} className="text-blue-500" />;
    }
  };

  const statusColor = (status: string | null) => {
    switch (status) {
      case "At Goal": return "bg-green-100 text-green-700";
      case "Improving": return "bg-blue-100 text-blue-700";
      case "Off Track": return "bg-red-100 text-red-700";
      default: return "bg-slate-100 text-slate-600";
    }
  };

  const pathways = [
    { name: "Diabetes Management Program", enrolled: true, progress: 45 },
    { name: "Hypertension Control Pathway", enrolled: true, progress: 72 },
    { name: "Heart Failure Disease Management", enrolled: false, progress: 0 },
    { name: "Weight Management Program", enrolled: false, progress: 0 },
  ];

  return (
    <div className="space-y-5 max-w-5xl">
      {/* Clinical Goals */}
      <div className="bg-white border border-slate-200 rounded-xl">
        <div className="px-5 py-3 border-b border-slate-100 flex items-center gap-2">
          <Target size={14} className="text-clinical-600" />
          <h3 className="text-sm font-semibold text-slate-800">Clinical Goals</h3>
        </div>
        <div className="divide-y divide-slate-50">
          {data.goals.map((goal) => (
            <div key={goal.id} className="px-5 py-4">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <p className="text-sm font-semibold text-slate-800">{goal.goalName}</p>
                  <span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${statusColor(goal.status)}`}>
                    {goal.status}
                  </span>
                </div>
                {trendIcon(goal.trend)}
              </div>
              <div className="flex items-center gap-4">
                <div>
                  <p className="text-[10px] text-slate-400">Target</p>
                  <p className="text-sm font-bold text-clinical-600">{goal.targetValue} {goal.unit}</p>
                </div>
                <div className="text-center">
                  <p className="text-xs text-slate-400">→</p>
                </div>
                <div>
                  <p className="text-[10px] text-slate-400">Current</p>
                  <p className={`text-sm font-bold ${
                    goal.status === "At Goal" ? "text-green-600" :
                    goal.status === "Off Track" ? "text-red-600" : "text-orange-600"
                  }`}>{goal.currentValue} {goal.unit}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Care Pathways */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3">📋 Care Pathways</h3>
          <div className="space-y-3">
            {pathways.map((p) => (
              <div key={p.name} className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                <div className="flex-1">
                  <p className="text-xs font-medium text-slate-700">{p.name}</p>
                  {p.enrolled ? (
                    <div className="mt-1.5">
                      <div className="w-full h-1.5 bg-slate-200 rounded-full overflow-hidden">
                        <div className="h-full bg-clinical-500 rounded-full" style={{ width: `${p.progress}%` }} />
                      </div>
                      <p className="text-[10px] text-slate-400 mt-0.5">{p.progress}% complete</p>
                    </div>
                  ) : (
                    <button className="mt-1 px-2 py-1 bg-clinical-100 text-clinical-700 rounded text-[10px] font-medium hover:bg-clinical-200 transition-colors">
                      Enroll Patient
                    </button>
                  )}
                </div>
                {p.enrolled && <CheckCircle size={14} className="text-green-500 shrink-0" />}
              </div>
            ))}
          </div>
        </div>

        {/* Advance Care Planning */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3">📜 Advance Care Planning</h3>
          <div className="space-y-3">
            <div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
              <div>
                <p className="text-xs font-medium text-slate-700">Advance Directive</p>
                <p className="text-[10px] text-slate-500">Not on file</p>
              </div>
              <button className="px-2 py-1 bg-clinical-100 text-clinical-700 rounded text-[10px] font-medium">
                Document
              </button>
            </div>
            <div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
              <div>
                <p className="text-xs font-medium text-slate-700">Code Status</p>
                <p className="text-[10px] text-slate-500">{data.patient.codeStatus}</p>
              </div>
              <button className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-[10px] font-medium">
                Update
              </button>
            </div>
            <div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
              <div>
                <p className="text-xs font-medium text-slate-700">Goals of Care Discussion</p>
                <p className="text-[10px] text-slate-500">Not documented</p>
              </div>
              <button className="px-2 py-1 bg-clinical-100 text-clinical-700 rounded text-[10px] font-medium">
                Document
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}