'use client'
import { AppShell } from '@/components/layout/AppShell'
import { StatCard } from '@/components/dashboard/StatCard'
import { MonthlyChart, StatusPieChart } from '@/components/dashboard/DashboardCharts'
import { AlertsPanel } from '@/components/dashboard/AlertsPanel'
import { RecentOperations } from '@/components/dashboard/RecentOperations'
import {
  FileText, Clock, CheckCircle2, PenLine, Archive,
  AlertTriangle, Signature, FolderOpen,
} from 'lucide-react'

export default function DashboardPage() {
  return (
    <AppShell>
      <div className="space-y-6 max-w-screen-xl mx-auto">
        {/* Stats Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <StatCard label="Total Operaciones" value={34} icon={FileText} color="blue" index={0} />
          <StatCard label="En Confección" value={5} icon={PenLine} color="purple" index={1} />
          <StatCard label="Pend. Documentación" value={8} icon={AlertTriangle} color="yellow" index={2} />
          <StatCard label="Esperando Aprobación" value={4} icon={Clock} color="red" index={3} />
          <StatCard label="Listos para Firma" value={3} icon={Signature} color="green" index={4} />
          <StatCard label="Contratos Firmados" value={12} icon={CheckCircle2} color="green" index={5} />
          <StatCard label="Archivados" value={7} icon={Archive} color="gray" index={6} />
          <StatCard label="Activas" value={27} icon={FolderOpen} color="blue" index={7} />
        </div>

        {/* Charts Row */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <div className="lg:col-span-2">
            <MonthlyChart />
          </div>
          <StatusPieChart />
        </div>

        {/* Bottom Row */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <div className="lg:col-span-2">
            <RecentOperations />
          </div>
          <AlertsPanel />
        </div>
      </div>
    </AppShell>
  )
}