"use client";

import { useState } from 'react';
import DashboardHeader from './dashboard-header';
import StatsOverview from './stats-overview';
import ProjectGrid from './project-grid';
import { Project } from '@/types/project';

// Tipos
type ProjectStatus = 'en_progreso' | 'planificacion' | 'completado' | 'revision';

// Datos mock (luego esto vendrá de Dolibarr)
const mockProjects: Project[] = [
  {
    id: 1,
    name: "Rediseño Web Corporativa",
    client: "Tech Solutions SA",
    status: "en_progreso",
    progress: 65,
    budget: 45000,
    spent: 29250,
    startDate: "2024-10-15",
    endDate: "2024-12-30",
    team: 4,
    avatar: "TS"
  },
  {
    id: 2,
    name: "App Móvil E-commerce",
    client: "Fashion Store",
    status: "en_progreso",
    progress: 40,
    budget: 80000,
    spent: 32000,
    startDate: "2024-11-01",
    endDate: "2025-02-28",
    team: 6,
    avatar: "FS"
  },
  {
    id: 3,
    name: "Sistema CRM Interno",
    client: "Industrial Corp",
    status: "planificacion",
    progress: 10,
    budget: 120000,
    spent: 12000,
    startDate: "2024-12-01",
    endDate: "2025-05-30",
    team: 8,
    avatar: "IC"
  },
  {
    id: 4,
    name: "Dashboard Analytics",
    client: "Data Insights",
    status: "completado",
    progress: 100,
    budget: 35000,
    spent: 33500,
    startDate: "2024-08-01",
    endDate: "2024-11-15",
    team: 3,
    avatar: "DI"
  },
  {
    id: 5,
    name: "Migración Cloud AWS",
    client: "StartUp Innovate",
    status: "en_progreso",
    progress: 75,
    budget: 95000,
    spent: 71250,
    startDate: "2024-09-15",
    endDate: "2024-12-20",
    team: 5,
    avatar: "SI"
  },
  {
    id: 6,
    name: "Portal de Clientes",
    client: "Services Group",
    status: "revision",
    progress: 90,
    budget: 52000,
    spent: 48880,
    startDate: "2024-10-01",
    endDate: "2024-12-10",
    team: 4,
    avatar: "SG"
  }
];

export default function ProjectDashboard() {
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
  const [searchTerm, setSearchTerm] = useState('');

  const filteredProjects = mockProjects.filter(project =>
    project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    project.client.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      <DashboardHeader
        searchTerm={searchTerm}
        onSearchChange={setSearchTerm}
        viewMode={viewMode}
        onViewModeChange={setViewMode}
      />

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <StatsOverview projects={mockProjects} />
        <ProjectGrid projects={filteredProjects} viewMode={viewMode} />
      </main>
    </div>
  );
}