import {
  Clock,
  Calendar,
  CheckCircle,
  TrendingUp,
  UserCheck,
  Activity,
} from "lucide-react";
import { MetricCard, MetricCardSkeleton } from "../dashboard/MetricCard";
import { OccupancyHeatmap } from "../dashboard/OccupancyHeatmap";
import { useMetrics, useOccupancyData } from "../../hooks/useMetrics";

interface ConsultaUI {
  id: string;
  pacienteNome: string;
  dataHora: string;
  status: string;
}

interface DashboardTabProps {
  doctorTableId: string | null;
  consultasHoje: ConsultaUI[];
  consultasConfirmadas: ConsultaUI[];
}

export function DashboardTab({
  doctorTableId,
  consultasHoje,
  consultasConfirmadas,
}: DashboardTabProps) {
  const { data: metrics, isLoading: metricsLoading } = useMetrics(
    doctorTableId || undefined
  );
  const { data: occupancyData = [], isLoading: occupancyLoading } =
    useOccupancyData(doctorTableId || undefined);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
          Dashboard
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          Visão geral do seu consultório
        </p>
      </div>

      {/* Métricas KPI */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {metricsLoading ? (
          <>
            <MetricCardSkeleton />
            <MetricCardSkeleton />
            <MetricCardSkeleton />
            <MetricCardSkeleton />
            <MetricCardSkeleton />
            <MetricCardSkeleton />
          </>
        ) : metrics ? (
          <>
            <MetricCard
              title="Consultas Hoje"
              value={metrics.appointmentsToday}
              icon={Clock}
              description={`${consultasConfirmadas.length} confirmadas`}
              colorScheme="blue"
            />
            <MetricCard
              title="Total de Consultas"
              value={metrics.totalAppointments}
              icon={Calendar}
              description="Todas as consultas"
              colorScheme="purple"
            />
            <MetricCard
              title="Consultas Concluídas"
              value={metrics.completedAppointments}
              icon={CheckCircle}
              description="Atendimentos finalizados"
              colorScheme="green"
            />
            <MetricCard
              title="Pacientes Ativos"
              value={metrics.activePatients}
              icon={UserCheck}
              description="Últimos 30 dias"
              colorScheme="indigo"
            />
            <MetricCard
              title="Taxa de Ocupação"
              value={`${metrics.occupancyRate}%`}
              icon={Activity}
              description="Hoje"
              trend={
                metrics.occupancyRate > 70
                  ? { value: metrics.occupancyRate - 70, isPositive: true }
                  : undefined
              }
              colorScheme="orange"
            />
            <MetricCard
              title="Taxa de Comparecimento"
              value={`${100 - metrics.cancelledRate}%`}
              icon={TrendingUp}
              description="Geral"
              trend={
                metrics.cancelledRate < 15
                  ? { value: 15 - metrics.cancelledRate, isPositive: true }
                  : { value: metrics.cancelledRate - 15, isPositive: false }
              }
              colorScheme="green"
            />
          </>
        ) : null}
      </div>

      {/* Heatmap de Ocupação */}
      <OccupancyHeatmap
        data={occupancyData}
        isLoading={occupancyLoading}
        title="Ocupação Semanal"
      />

      {/* Consultas de Hoje Preview */}
      <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          Consultas de Hoje ({consultasHoje.length})
        </h2>
        {consultasHoje.length === 0 ? (
          <p className="text-center py-8 text-gray-600 dark:text-gray-400">
            Nenhuma consulta agendada para hoje
          </p>
        ) : (
          <div className="space-y-3">
            {consultasHoje.slice(0, 5).map((consulta) => (
              <div
                key={consulta.id}
                className="flex items-center justify-between p-3 bg-gray-50 dark:bg-slate-800 rounded-lg"
              >
                <div>
                  <p className="font-medium text-gray-900 dark:text-white">
                    {consulta.pacienteNome}
                  </p>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    {new Date(consulta.dataHora).toLocaleTimeString("pt-BR", {
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                  </p>
                </div>
                <span
                  className={`px-3 py-1 text-xs font-medium rounded-full ${
                    consulta.status === "confirmed" ||
                    consulta.status === "confirmada"
                      ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300"
                      : "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"
                  }`}
                >
                  {consulta.status}
                </span>
              </div>
            ))}
            {consultasHoje.length > 5 && (
              <p className="text-center text-sm text-gray-600 dark:text-gray-400">
                + {consultasHoje.length - 5} mais consultas
              </p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}
