"use client";

import type { PatientData } from "@/lib/types";
import { Smartphone, Activity, Heart, Brain, BookOpen } from "lucide-react";

export function AppActivityTab({ data }: { data: PatientData }) {
  const glucoseReadings = data.vitals.filter((v) => v.type === "blood_glucose").slice(0, 14);
  const bpReadings = data.vitals.filter((v) => v.type === "systolic_bp").slice(0, 14);
  const weightReadings = data.vitals.filter((v) => v.type === "weight").slice(0, 14);

  const symptomLogs = [
    { symptom: "Fatigue", severity: 7, date: "2 days ago", factors: "After long work day" },
    { symptom: "Increased thirst", severity: 6, date: "3 days ago", factors: "Throughout the day" },
    { symptom: "Nausea", severity: 4, date: "5 days ago", factors: "After taking metformin" },
    { symptom: "Dizziness", severity: 5, date: "1 week ago", factors: "Morning, upon standing" },
  ];

  const moodEntries = [
    { date: "Today", score: 6, label: "Okay" },
    { date: "Yesterday", score: 5, label: "Stressed" },
    { date: "2 days ago", score: 4, label: "Low" },
    { date: "3 days ago", score: 6, label: "Okay" },
    { date: "4 days ago", score: 7, label: "Good" },
  ];

  const education = [
    { title: "Understanding Your A1c Results", completed: true, date: "1 week ago" },
    { title: "Managing Blood Sugar with Diet", completed: true, date: "2 weeks ago" },
    { title: "Exercise and Diabetes", completed: false, date: "In Progress" },
    { title: "Introduction to GLP-1 Medications", completed: false, date: "Not started" },
  ];

  return (
    <div className="space-y-5 max-w-5xl">
      {/* Engagement Summary */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
        {[
          { label: "Last Login", value: data.patient.appLastLogin ? new Date(data.patient.appLastLogin).toLocaleString() : "Never", color: "text-green-600" },
          { label: "Sessions This Month", value: "23", color: "text-clinical-600" },
          { label: "Engagement Trend", value: "↗ Increasing", color: "text-green-600" },
          { label: "Features Used", value: "5 of 7", color: "text-purple-600" },
        ].map((stat) => (
          <div key={stat.label} className="bg-white border border-slate-200 rounded-xl p-3">
            <p className="text-[10px] text-slate-500">{stat.label}</p>
            <p className={`text-sm font-bold mt-0.5 ${stat.color}`}>{stat.value}</p>
          </div>
        ))}
      </div>

      {/* Medication Adherence */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-1.5">
          💊 Medication Adherence (30 days)
        </h3>
        <div className="space-y-3">
          {data.medications.filter((m) => m.isActive).map((med) => (
            <div key={med.id} className="flex items-center gap-3">
              <div className="flex-1">
                <div className="flex items-center justify-between mb-1">
                  <span className="text-xs font-medium text-slate-700">{med.name}</span>
                  <span className={`text-xs font-bold ${
                    (med.adherenceRate || 0) >= 90 ? "text-green-600" :
                    (med.adherenceRate || 0) >= 75 ? "text-orange-600" : "text-red-600"
                  }`}>{med.adherenceRate}%</span>
                </div>
                <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
                  <div
                    className={`h-full rounded-full ${
                      (med.adherenceRate || 0) >= 90 ? "bg-green-500" :
                      (med.adherenceRate || 0) >= 75 ? "bg-orange-500" : "bg-red-500"
                    }`}
                    style={{ width: `${med.adherenceRate || 0}%` }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Remote Monitoring Data */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-1.5">
            <Activity size={14} className="text-clinical-600" />
            Device Data Stream
          </h3>
          <div className="space-y-4">
            {/* Glucose */}
            <div>
              <div className="flex items-center justify-between mb-1">
                <span className="text-xs font-medium text-slate-600">Blood Glucose (mg/dL)</span>
                <span className="text-xs text-red-600 font-semibold">Avg: 210</span>
              </div>
              <div className="flex items-end gap-0.5 h-12">
                {glucoseReadings.reverse().map((v, i) => {
                  const val = parseFloat(v.value);
                  const height = Math.max(10, ((val - 100) / 150) * 100);
                  return (
                    <div key={i} className="flex-1 flex flex-col items-center">
                      <div
                        className={`w-full rounded-t ${val > 200 ? "bg-red-400" : val > 140 ? "bg-orange-400" : "bg-green-400"}`}
                        style={{ height: `${height}%` }}
                        title={`${v.value} mg/dL`}
                      />
                    </div>
                  );
                })}
              </div>
            </div>
            {/* BP */}
            <div>
              <div className="flex items-center justify-between mb-1">
                <span className="text-xs font-medium text-slate-600">Systolic BP (mmHg)</span>
                <span className="text-xs text-green-600 font-semibold">Avg: 130</span>
              </div>
              <div className="flex items-end gap-0.5 h-10">
                {bpReadings.reverse().map((v, i) => {
                  const val = parseFloat(v.value);
                  const height = Math.max(10, ((val - 100) / 60) * 100);
                  return (
                    <div key={i} className="flex-1">
                      <div
                        className={`w-full rounded-t ${val > 140 ? "bg-red-400" : val > 130 ? "bg-orange-400" : "bg-green-400"}`}
                        style={{ height: `${Math.min(100, height)}%` }}
                        title={`${v.value} mmHg`}
                      />
                    </div>
                  );
                })}
              </div>
            </div>
            {/* Weight */}
            <div>
              <div className="flex items-center justify-between mb-1">
                <span className="text-xs font-medium text-slate-600">Weight (lbs)</span>
                <span className="text-xs text-green-600 font-semibold">↓ 3 lbs</span>
              </div>
              <div className="flex items-end gap-0.5 h-8">
                {weightReadings.reverse().map((v, i) => {
                  const val = parseFloat(v.value);
                  const height = Math.max(20, ((val - 185) / 15) * 100);
                  return (
                    <div key={i} className="flex-1">
                      <div className="w-full bg-blue-400 rounded-t" style={{ height: `${Math.min(100, height)}%` }} title={`${v.value} lbs`} />
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {/* Symptom Logs */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3">📝 Symptom Logs</h3>
          <div className="space-y-2">
            {symptomLogs.map((s, i) => (
              <div key={i} className="flex items-center gap-3 p-2 bg-slate-50 rounded-lg">
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <p className="text-xs font-medium text-slate-700">{s.symptom}</p>
                    <span className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
                      s.severity >= 7 ? "bg-red-100 text-red-700" :
                      s.severity >= 4 ? "bg-orange-100 text-orange-700" :
                      "bg-green-100 text-green-700"
                    }`}>{s.severity}/10</span>
                  </div>
                  <p className="text-[10px] text-slate-400 mt-0.5">{s.date} • {s.factors}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Mental Health */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-1.5">
            <Brain size={14} className="text-purple-500" />
            Mental Health Tracking
          </h3>
          <div className="space-y-2">
            <div className="flex items-center justify-between p-2 bg-slate-50 rounded-lg">
              <span className="text-xs text-slate-600">PHQ-9 Score</span>
              <span className="text-xs font-bold text-yellow-600">8 — Mild depression</span>
            </div>
            <div className="flex items-center justify-between p-2 bg-slate-50 rounded-lg">
              <span className="text-xs text-slate-600">GAD-7 Score</span>
              <span className="text-xs font-bold text-green-600">4 — Minimal anxiety</span>
            </div>
            <p className="text-[10px] text-slate-500 font-medium mt-2">Daily Mood Ratings</p>
            <div className="flex items-center gap-2">
              {moodEntries.map((m, i) => (
                <div key={i} className="flex-1 text-center">
                  <div className={`w-full h-8 rounded flex items-end justify-center ${
                    m.score >= 7 ? "bg-green-100" : m.score >= 5 ? "bg-yellow-100" : "bg-red-100"
                  }`}>
                    <span className="text-[10px] font-bold mb-1">{m.score}</span>
                  </div>
                  <p className="text-[8px] text-slate-400 mt-0.5">{m.date}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Education */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-1.5">
            <BookOpen size={14} className="text-clinical-600" />
            Education Progress
          </h3>
          <div className="space-y-2">
            {education.map((e, i) => (
              <div key={i} className="flex items-center gap-3 p-2 bg-slate-50 rounded-lg">
                <div className={`w-5 h-5 rounded-full flex items-center justify-center shrink-0 ${
                  e.completed ? "bg-green-500 text-white" : "bg-slate-200"
                }`}>
                  {e.completed && <span className="text-[10px]">✓</span>}
                </div>
                <div className="flex-1">
                  <p className={`text-xs ${e.completed ? "text-slate-500 line-through" : "text-slate-700 font-medium"}`}>{e.title}</p>
                  <p className="text-[10px] text-slate-400">{e.date}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Patient Questions */}
      <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-purple-800 mb-3">💬 Patient Questions for Today&apos;s Visit</h3>
        <div className="space-y-2">
          {[
            "I've been feeling dizzy in the mornings — wondering if it's my blood pressure medication",
            "I want to talk about the side effects I've been having with metformin",
            "I read something about a new diabetes medication — can we discuss it?",
          ].map((q, i) => (
            <div key={i} className="bg-white rounded-lg p-3 border border-purple-100">
              <p className="text-xs text-purple-700 italic">&ldquo;{q}&rdquo;</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}