"use client"

import { useAuth } from "@/lib/auth-context"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, FileText, Building2, Calendar } from "lucide-react"
import Link from "next/link"
import { useApi } from "@/lib/use-api"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Legend
} from "recharts"

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8", "#82ca9d"]

export default function DashboardPage() {
  const { user } = useAuth()
  const isAdmin = user?.role === "admin"

  const { data: dashboardData, isLoading } = useApi("/dashboard/stats")

  const currentMonth = new Date().toLocaleDateString("es-AR", { month: "long", year: "numeric" })

  const stats = [
    {
      title: "Recetas Emitidas Este Mes",
      value: isLoading ? "-" : dashboardData?.stats?.recetas_mes || 0,
      description: `Total en ${currentMonth}`,
      icon: FileText,
      show: true,
    },
    {
      title: "Productores Activos",
      value: isLoading ? "-" : dashboardData?.stats?.productores_activos || 0,
      description: "Con recetas vigentes",
      icon: Users,
      show: true,
    },
    {
      title: "Establecimientos",
      value: isLoading ? "-" : dashboardData?.stats?.establecimientos_total || 0,
      description: "Campos registrados",
      icon: Building2,
      show: true,
    },
    {
      title: "Este Mes",
      value: isLoading ? "-" : `${dashboardData?.stats?.variacion_recetas > 0 ? "+" : ""}${dashboardData?.stats?.variacion_recetas}%`,
      description: "vs mes anterior",
      icon: Calendar,
      show: isAdmin,
    },
  ]

  const visibleStats = stats.filter((stat) => stat.show)
  const recentRecipes = dashboardData?.latest_recetas || []

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-foreground text-balance">Bienvenido, {user?.name}</h1>
          <p className="text-muted-foreground mt-2">
            {isAdmin
              ? "Panel de administración completo de AgroRecetas"
              : "Panel de gestión de productores y recetas agrícolas"}
          </p>
        </div>

        <div className="hidden md:grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {visibleStats.map((stat) => {
            const Icon = stat.icon
            return (
              <Card key={stat.title}>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium text-muted-foreground">{stat.title}</CardTitle>
                  <Icon className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-foreground">
                    {isLoading ? <div className="h-6 w-12 bg-muted animate-pulse rounded" /> : stat.value}
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">{stat.description}</p>
                </CardContent>
              </Card>
            )
          })}
        </div>

        {/* Charts Section */}
        <div className="grid gap-4 md:grid-cols-2">
          <Card className="col-span-1">
            <CardHeader>
              <CardTitle>Superficie Sembrada por Cultivo</CardTitle>
              <CardDescription>Total de hectáreas (Labor: Siembra)</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px] w-full">
                {isLoading ? (
                  <div className="flex h-full items-center justify-center text-muted-foreground">Cargando...</div>
                ) : !dashboardData?.charts?.superficie_por_cultivo?.length ? (
                  <div className="flex h-full items-center justify-center text-muted-foreground">No hay datos de siembra registrados</div>
                ) : (
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={dashboardData.charts.superficie_por_cultivo}
                        cx="50%"
                        cy="50%"
                        label={({ name, value }) => `${name}: ${value} ha`}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                      >
                        {dashboardData.charts.superficie_por_cultivo.map((entry: any, index: number) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip 
                        formatter={(value) => `${value} ha`} 
                        labelStyle={{ color: '#000', fontWeight: 'bold' }}
                        itemStyle={{ color: '#000' }}
                      />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                )}
              </div>
            </CardContent>
          </Card>

          <Card className="col-span-1">
            <CardHeader>
              <CardTitle>Evolución de Recetas</CardTitle>
              <CardDescription>Cantidad de recetas por fecha</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px] w-full">
                {isLoading ? (
                  <div className="flex h-full items-center justify-center text-muted-foreground">Cargando...</div>
                ) : !dashboardData?.charts?.recetas_por_fecha?.length ? (
                  <div className="flex h-full items-center justify-center text-muted-foreground">No hay recetas registradas</div>
                ) : (
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={dashboardData.charts.recetas_por_fecha}
                      margin={{
                        top: 5,
                        right: 30,
                        left: 20,
                        bottom: 5,
                      }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="date" />
                      <YAxis allowDecimals={false} />
                      <Tooltip 
                        labelStyle={{ color: '#000', fontWeight: 'bold' }}
                        itemStyle={{ color: '#16a34a', fontWeight: '500' }}
                      />
                      <Bar dataKey="count" name="Recetas" fill="#16a34a" radius={[4, 4, 0, 0]} />
                    </BarChart>
                  </ResponsiveContainer>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          <Card className="col-span-full">
            <CardHeader className="flex flex-row items-start justify-between pb-4">
              <div>
                <CardTitle>Últimas Recetas</CardTitle>
                <CardDescription>Recetas recientes</CardDescription>
              </div>
              <Link href="/dashboard/recetas/nueva" className="shrink-0 hidden sm:block">
                <button className="rounded-lg bg-emerald-600 px-4 py-2 text-center text-sm font-bold text-white hover:bg-emerald-800 hover:scale-[1.02] hover:shadow-lg transition-all duration-300 shadow-md">
                  + NUEVA RECETA
                </button>
              </Link>
            </CardHeader>
            <CardContent>
              <div className="sm:hidden mb-4">
                <Link href="/dashboard/recetas/nueva">
                  <button className="w-full rounded-lg bg-emerald-600 p-3 text-center text-sm font-bold text-white hover:bg-emerald-800 transition-all shadow-md">
                    + NUEVA RECETA
                  </button>
                </Link>
              </div>
              <div className="space-y-4">
                {isLoading ? (
                  <div className="text-center py-4 text-muted-foreground">Cargando recetas...</div>
                ) : recentRecipes.length === 0 ? (
                  <div className="text-center py-4 text-muted-foreground">No hay recetas recientes</div>
                ) : (
                  recentRecipes.map((receta: any) => (
                    <Link
                      href={`/dashboard/recetas/ver?id=${receta.id}`}
                      key={receta.id}
                      className="group flex items-center gap-4 border-b border-border py-3 last:border-0 last:pb-0 hover:bg-muted/50 hover:px-2 transition-all duration-200 rounded-md -mx-2 px-2"
                    >
                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 shrink-0">
                        <FileText className="h-5 w-5 text-primary" />
                      </div>
                      <div className="flex-1">
                        <p className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">{receta.id}</p>
                        <p className="text-sm text-muted-foreground">
                          {receta.productor} - {receta.establecimiento}
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="text-xs text-muted-foreground mt-1">{receta.fecha}</p>
                      </div>
                    </Link>
                  ))
                )}
              </div>
              <div className="mt-4">
                <Link href="/dashboard/recetas" className="text-sm font-medium text-primary hover:underline">
                  Ver todas las recetas →
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </DashboardLayout>
  )
}