'use client';

import React, { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { Calendar } from 'primereact/calendar';
import { Timeline } from 'primereact/timeline';
import { Tag } from 'primereact/tag';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Chart } from 'primereact/chart';
import { TabView, TabPanel } from 'primereact/tabview';
import { planningService } from '@/services/api';
import type { PlanningEvent } from '@/types/btp';

export default function ChantierPlanningPage() {
  const params = useParams();
  const router = useRouter();
  const id = params.id as string;

  const [taches, setTaches] = useState<PlanningEvent[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
  const [viewMode, setViewMode] = useState<'timeline' | 'gantt'>('timeline');

  useEffect(() => {
    if (id) {
      loadPlanning();
    }
  }, [id]);

  const loadPlanning = async () => {
    try {
      setLoading(true);
      // Récupérer les événements de planning pour ce chantier
      const data = await planningService.getEvents({ chantierId: id });
      setTaches(data || []);
    } catch (error) {
      console.error('Erreur lors du chargement du planning:', error);
      // L'intercepteur API gérera automatiquement la redirection si 401
      setTaches([]);
    } finally {
      setLoading(false);
    }
  };

  const formatDate = (dateString: string) => {
    if (!dateString) return 'N/A';
    return new Date(dateString).toLocaleDateString('fr-FR');
  };

  const getStatutSeverity = (statut: string) => {
    switch (statut?.toUpperCase()) {
      case 'A_FAIRE':
        return 'info';
      case 'EN_COURS':
        return 'warning';
      case 'TERMINE':
        return 'success';
      case 'EN_RETARD':
        return 'danger';
      default:
        return 'info';
    }
  };

  const getStatutLabel = (statut: string) => {
    const labels: { [key: string]: string } = {
      'A_FAIRE': 'À faire',
      'EN_COURS': 'En cours',
      'TERMINE': 'Terminé',
      'EN_RETARD': 'En retard'
    };
    return labels[statut] || statut;
  };

  const statutBodyTemplate = (rowData: PlanningEvent) => {
    return (
      <Tag
        value={getStatutLabel(rowData.statut)}
        severity={getStatutSeverity(rowData.statut)}
      />
    );
  };

  const dateBodyTemplate = (rowData: PlanningEvent) => {
    return (
      <div>
        <div><strong>Début:</strong> {formatDate(rowData.dateDebut)}</div>
        <div><strong>Fin:</strong> {formatDate(rowData.dateFin)}</div>
      </div>
    );
  };

  const equipeBodyTemplate = (rowData: PlanningEvent) => {
    return rowData.equipe?.nom || 'Non assignée';
  };

  const prioriteBodyTemplate = (rowData: PlanningEvent) => {
    const severity = rowData.priorite === 'CRITIQUE' ? 'danger' : rowData.priorite === 'HAUTE' ? 'warning' : rowData.priorite === 'NORMALE' ? 'info' : 'success';
    return <Tag value={rowData.priorite} severity={severity} />;
  };

  const actionsBodyTemplate = (rowData: PlanningEvent) => {
    return (
      <div className="flex gap-2">
        <Button
          icon="pi pi-eye"
          className="p-button-text p-button-sm"
          tooltip="Voir les détails"
        />
        <Button
          icon="pi pi-pencil"
          className="p-button-text p-button-sm"
          tooltip="Modifier"
        />
        <Button
          icon="pi pi-trash"
          className="p-button-text p-button-sm p-button-danger"
          tooltip="Supprimer"
        />
      </div>
    );
  };

  const customizedMarker = (item: PlanningEvent) => {
    return (
      <span
        className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1"
        style={{ backgroundColor: item.statut === 'TERMINE' ? '#10b981' : '#3b82f6' }}
      >
        <i className={item.statut === 'TERMINE' ? 'pi pi-check' : 'pi pi-clock'}></i>
      </span>
    );
  };

  const customizedContent = (item: PlanningEvent) => {
    return (
      <Card>
        <div className="flex justify-content-between align-items-center mb-2">
          <span className="font-bold">{item.titre}</span>
          <Tag value={getStatutLabel(item.statut)} severity={getStatutSeverity(item.statut)} />
        </div>
        <p className="text-600 mb-2">{item.description}</p>
        <div className="text-sm">
          <div><strong>Équipe:</strong> {item.equipe?.nom || 'Non assignée'}</div>
          <div><strong>Priorité:</strong> {item.priorite}</div>
          <div><strong>Dates:</strong> {formatDate(item.dateDebut)} - {formatDate(item.dateFin)}</div>
        </div>
      </Card>
    );
  };

  // Générer les données pour le diagramme de Gantt
  const getGanttData = () => {
    if (!taches || taches.length === 0) return null;

    // Calculer les durées en jours pour chaque tâche
    const ganttDatasets = taches.map(tache => {
      const debut = new Date(tache.dateDebut).getTime();
      const fin = new Date(tache.dateFin).getTime();
      const duree = Math.ceil((fin - debut) / (1000 * 60 * 60 * 24));

      return {
        label: tache.titre,
        duree: duree,
        statut: tache.statut
      };
    });

    const colors = ganttDatasets.map(item => {
      switch (item.statut?.toUpperCase()) {
        case 'TERMINE': return '#10b981';
        case 'EN_COURS': return '#3b82f6';
        case 'EN_RETARD': return '#ef4444';
        default: return '#6b7280';
      }
    });

    return {
      labels: ganttDatasets.map(d => d.label),
      datasets: [{
        label: 'Durée (jours)',
        data: ganttDatasets.map(d => d.duree),
        backgroundColor: colors,
        borderColor: colors,
        borderWidth: 1
      }]
    };
  };

  const ganttOptions = {
    indexAxis: 'y' as const,
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      },
      title: {
        display: true,
        text: 'Diagramme de Gantt - Durée des tâches'
      }
    },
    scales: {
      x: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Durée (jours)'
        }
      }
    }
  };

  return (
    <div className="grid">
      <div className="col-12">
        <div className="flex justify-content-between align-items-center mb-3">
          <div className="flex align-items-center">
            <Button
              icon="pi pi-arrow-left"
              className="p-button-text mr-2"
              onClick={() => router.push(`/chantiers/${id}`)}
              tooltip="Retour"
            />
            <h2 className="m-0">Planning du chantier</h2>
          </div>
          <div className="flex gap-2">
            <Button
              label={viewMode === 'timeline' ? 'Vue Gantt' : 'Vue Timeline'}
              icon={viewMode === 'timeline' ? 'pi pi-chart-bar' : 'pi pi-history'}
              className="p-button-outlined"
              onClick={() => setViewMode(viewMode === 'timeline' ? 'gantt' : 'timeline')}
            />
            <Button
              label="Ajouter une tâche"
              icon="pi pi-plus"
              className="p-button-success"
            />
          </div>
        </div>
      </div>

      {/* Calendrier */}
      <div className="col-12 lg:col-4">
        <Card title="Calendrier">
          <Calendar
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.value as Date)}
            inline
            showWeek
          />

          <div className="mt-3">
            <h4>Légende</h4>
            <div className="flex flex-column gap-2">
              <div className="flex align-items-center">
                <div className="w-1rem h-1rem bg-blue-500 border-round mr-2"></div>
                <span>En cours</span>
              </div>
              <div className="flex align-items-center">
                <div className="w-1rem h-1rem bg-green-500 border-round mr-2"></div>
                <span>Terminé</span>
              </div>
              <div className="flex align-items-center">
                <div className="w-1rem h-1rem bg-red-500 border-round mr-2"></div>
                <span>En retard</span>
              </div>
              <div className="flex align-items-center">
                <div className="w-1rem h-1rem bg-gray-500 border-round mr-2"></div>
                <span>À faire</span>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Timeline ou Gantt */}
      <div className="col-12 lg:col-8">
        <Card title={viewMode === 'timeline' ? 'Chronologie des tâches' : 'Diagramme de Gantt'}>
          {viewMode === 'timeline' ? (
            <Timeline
              value={taches}
              align="alternate"
              className="customized-timeline"
              marker={customizedMarker}
              content={customizedContent}
            />
          ) : (
            <div style={{ height: '400px' }}>
              {getGanttData() ? (
                <Chart type="bar" data={getGanttData()!} options={ganttOptions} />
              ) : (
                <div className="text-center p-5 text-600">
                  <i className="pi pi-chart-bar text-4xl mb-3"></i>
                  <p>Aucune tâche à afficher dans le diagramme de Gantt</p>
                </div>
              )}
            </div>
          )}
        </Card>
      </div>

      {/* Tableau des tâches */}
      <div className="col-12">
        <Card title="Liste des tâches">
          <DataTable
            value={taches}
            loading={loading}
            responsiveLayout="scroll"
            paginator
            rows={10}
            emptyMessage="Aucune tâche planifiée"
            sortField="dateDebut"
            sortOrder={1}
          >
            <Column field="titre" header="Tâche" sortable filter />
            <Column field="statut" header="Statut" body={statutBodyTemplate} sortable filter />
            <Column header="Dates" body={dateBodyTemplate} sortable />
            <Column header="Priorité" body={prioriteBodyTemplate} sortable filter />
            <Column header="Équipe" body={equipeBodyTemplate} sortable filter />
            <Column header="Actions" body={actionsBodyTemplate} />
          </DataTable>
        </Card>
      </div>
    </div>
  );
}