"use client";

import Link from "next/link";
import { Calendar, MapPin, Stethoscope, User, Building2, Pill, Clock } from "lucide-react";
import { Card, CardContent, Badge } from "@/src/shared/ui";
import { cn } from "@/lib/utils";
import { MedicalStatusChip } from "./MedicalStatusChip";
import type {
  Appointment,
  Clinic,
  Doctor,
  Patient,
  PrescriptionOrder,
} from "@/src/modules/healthcare/services/healthcare-api";

function CardShell({
  children,
  href,
  className,
}: {
  children: React.ReactNode;
  href?: string;
  className?: string;
}) {
  const inner = (
    <Card
      className={cn(
        "group border-[var(--border)] bg-[var(--surface)] shadow-[var(--shadow-sm)] transition-all duration-200 hover:shadow-[var(--shadow-md)]",
        href && "cursor-pointer hover:border-[var(--health-accent)]/30",
        className
      )}
    >
      <CardContent className="p-5">{children}</CardContent>
    </Card>
  );
  if (href) return <Link href={href}>{inner}</Link>;
  return inner;
}

export function ClinicCard({ clinic, href }: { clinic: Clinic; href?: string }) {
  return (
    <CardShell href={href ?? `/healthcare/site/clinic/${clinic.id}`}>
      <div className="flex items-start gap-4">
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--health-accent-soft)] text-[var(--health-accent)]">
          <Building2 className="h-6 w-6" />
        </div>
        <div className="min-w-0 flex-1">
          <p className="truncate text-lg font-semibold text-secondary">{clinic.name}</p>
          <p className="mt-1 text-sm text-[var(--muted)]">{clinic.code}</p>
          <div className="mt-3">
            <Badge tone={clinic.status === "active" ? "success" : "default"}>{clinic.status}</Badge>
          </div>
        </div>
      </div>
    </CardShell>
  );
}

export function DoctorCard({ doctor, href }: { doctor: Doctor; href?: string }) {
  return (
    <CardShell href={href ?? `/healthcare/site/doctor/${doctor.id}`}>
      <div className="flex items-start gap-4">
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--health-calm)]/15 text-[var(--health-accent)]">
          <Stethoscope className="h-6 w-6" />
        </div>
        <div className="min-w-0 flex-1">
          <p className="truncate text-lg font-semibold text-secondary">{doctor.display_name}</p>
          <p className="mt-1 text-sm text-[var(--muted)]">{doctor.specialty ?? "پزشک"}</p>
          {doctor.license_number ? (
            <p className="mt-1 text-xs text-[var(--muted)]">پروانه: {doctor.license_number}</p>
          ) : null}
        </div>
      </div>
    </CardShell>
  );
}

export function PatientCard({ patient, href }: { patient: Patient; href?: string }) {
  return (
    <CardShell href={href}>
      <div className="flex items-start gap-4">
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--surface-muted)] text-secondary">
          <User className="h-6 w-6" />
        </div>
        <div className="min-w-0 flex-1">
          <p className="truncate text-lg font-semibold text-secondary">{patient.display_name}</p>
          <p className="mt-1 text-sm text-[var(--muted)]">{patient.code}</p>
          <MedicalStatusChip status={patient.status} className="mt-3" />
        </div>
      </div>
    </CardShell>
  );
}

export function AppointmentCard({
  appointment,
  doctorName,
  href,
  actions,
}: {
  appointment: Appointment;
  doctorName?: string;
  href?: string;
  actions?: React.ReactNode;
}) {
  const start = new Date(appointment.scheduled_start);
  return (
    <CardShell href={href} className="relative">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-2">
            <MedicalStatusChip status={appointment.status} domain="appointment" />
            <span className="text-xs text-[var(--muted)]">{appointment.code}</span>
          </div>
          <p className="mt-2 flex items-center gap-2 text-sm font-medium text-secondary">
            <Calendar className="h-4 w-4 text-[var(--health-accent)]" />
            {start.toLocaleString("fa-IR")}
          </p>
          {doctorName ? (
            <p className="mt-1 flex items-center gap-2 text-sm text-[var(--muted)]">
              <Stethoscope className="h-4 w-4" />
              {doctorName}
            </p>
          ) : null}
        </div>
        {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
      </div>
    </CardShell>
  );
}

export function PrescriptionCard({
  order,
  href,
  actions,
}: {
  order: PrescriptionOrder;
  href?: string;
  actions?: React.ReactNode;
}) {
  return (
    <CardShell href={href}>
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <Pill className="h-5 w-5 text-[var(--health-accent)]" />
            <p className="font-semibold text-secondary">{order.code}</p>
          </div>
          <MedicalStatusChip status={order.status} domain="prescription" className="mt-2" />
        </div>
        {actions}
      </div>
    </CardShell>
  );
}

export function StatWidget({
  label,
  value,
  hint,
  icon: Icon,
}: {
  label: string;
  value: string | number;
  hint?: string;
  icon?: React.ComponentType<{ className?: string }>;
}) {
  return (
    <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-5 shadow-[var(--shadow-sm)] transition-shadow hover:shadow-[var(--shadow-md)]">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-sm text-[var(--muted)]">{label}</p>
          <p className="mt-2 text-3xl font-bold tracking-tight text-secondary">{value}</p>
          {hint ? <p className="mt-1 text-xs text-[var(--muted)]">{hint}</p> : null}
        </div>
        {Icon ? (
          <div className="rounded-xl bg-[var(--health-accent-soft)] p-2.5 text-[var(--health-accent)]">
            <Icon className="h-5 w-5" />
          </div>
        ) : null}
      </div>
    </div>
  );
}

export function TimelineItem({
  title,
  subtitle,
  time,
  active,
}: {
  title: string;
  subtitle?: string;
  time?: string;
  active?: boolean;
}) {
  return (
    <div className="relative flex gap-4 pb-6 last:pb-0">
      <div className="flex flex-col items-center">
        <div
          className={cn(
            "h-3 w-3 rounded-full ring-4",
            active
              ? "bg-[var(--health-accent)] ring-[var(--health-accent-soft)]"
              : "bg-[var(--border)] ring-[var(--surface-muted)]"
          )}
        />
        <div className="mt-1 w-px flex-1 bg-[var(--border)]" />
      </div>
      <div className="min-w-0 flex-1 pt-0.5">
        <p className="font-medium text-secondary">{title}</p>
        {subtitle ? <p className="mt-0.5 text-sm text-[var(--muted)]">{subtitle}</p> : null}
        {time ? (
          <p className="mt-1 flex items-center gap-1 text-xs text-[var(--muted)]">
            <Clock className="h-3 w-3" />
            {time}
          </p>
        ) : null}
      </div>
    </div>
  );
}

export function QueueRow({
  position,
  title,
  subtitle,
  status,
  actions,
}: {
  position: number;
  title: string;
  subtitle?: string;
  status: string;
  actions?: React.ReactNode;
}) {
  return (
    <div className="flex items-center gap-4 rounded-2xl border border-[var(--border)] bg-[var(--surface)] px-4 py-3 shadow-[var(--shadow-sm)]">
      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--health-accent-soft)] text-sm font-bold text-[var(--health-accent)]">
        {position}
      </div>
      <div className="min-w-0 flex-1">
        <p className="font-medium text-secondary">{title}</p>
        {subtitle ? <p className="text-sm text-[var(--muted)]">{subtitle}</p> : null}
      </div>
      <MedicalStatusChip status={status} domain="visit" />
      {actions}
    </div>
  );
}

export function SearchResultRow({
  title,
  meta,
  href,
}: {
  title: string;
  meta: string;
  href: string;
}) {
  return (
    <Link
      href={href}
      className="flex items-center justify-between gap-4 rounded-2xl border border-[var(--border)] bg-[var(--surface)] px-4 py-4 transition-colors hover:bg-[var(--surface-muted)]"
    >
      <div>
        <p className="font-medium text-secondary">{title}</p>
        <p className="mt-1 flex items-center gap-1 text-sm text-[var(--muted)]">
          <MapPin className="h-3.5 w-3.5" />
          {meta}
        </p>
      </div>
    </Link>
  );
}
