'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';

interface TacheChantier {
  id: number;
  nom: string;
  description: string;
  dateDebut: string;
  dateFin: string;
  statut: string;
  responsable: {
    nom: string;
    prenom: string;
  };
  equipe: {
    nom: string;
  };
  progression: number;
}

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

  const [taches, setTaches] = useState<TacheChantier[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

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

  const loadPlanning = async () => {
    try {
      setLoading(true);
      const API_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.lions.dev/btpxpress';

      // Charger les tâches du chantier
      const response = await fetch(`${API_URL}/api/v1/chantiers/${id}/taches`);

      if (!response.ok) {
        throw new Error('Erreur lors du chargement du planning');
      }

      const data = await response.json();
      setTaches(data);
    } catch (error) {
      console.error('Erreur:', error);
    } 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: TacheChantier) => {
    return (
      <Tag
        value={getStatutLabel(rowData.statut)}
        severity={getStatutSeverity(rowData.statut)}
      />
    );
  };

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

  const responsableBodyTemplate = (rowData: TacheChantier) => {
    return `${rowData.responsable?.prenom} ${rowData.responsable?.nom}`;
  };

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

  const progressionBodyTemplate = (rowData: TacheChantier) => {
    return (
      <div className="flex align-items-center">
        <div className="flex-1 mr-2">
          <div className="surface-300 border-round" style={{ height: '8px' }}>
            <div
              className="bg-primary border-round"
              style={{ height: '8px', width: `${rowData.progression}%` }}
            ></div>
          </div>
        </div>
        <span>{rowData.progression}%</span>
      </div>
    );
  };

  const actionsBodyTemplate = (rowData: TacheChantier) => {
    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: TacheChantier) => {
    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: TacheChantier) => {
    return (
      <Card>
        <div className="flex justify-content-between align-items-center mb-2">
          <span className="font-bold">{item.nom}</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>Responsable:</strong> {item.responsable?.prenom} {item.responsable?.nom}</div>
          <div><strong>Équipe:</strong> {item.equipe?.nom || 'Non assignée'}</div>
          <div><strong>Dates:</strong> {formatDate(item.dateDebut)} - {formatDate(item.dateFin)}</div>
        </div>
      </Card>
    );
  };

  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="Vue Gantt"
              icon="pi pi-chart-bar"
              className="p-button-outlined"
            />
            <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 */}
      <div className="col-12 lg:col-8">
        <Card title="Chronologie des tâches">
          <Timeline
            value={taches}
            align="alternate"
            className="customized-timeline"
            marker={customizedMarker}
            content={customizedContent}
          />
        </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="nom" header="Tâche" sortable filter />
            <Column field="statut" header="Statut" body={statutBodyTemplate} sortable filter />
            <Column header="Dates" body={dateBodyTemplate} sortable />
            <Column header="Responsable" body={responsableBodyTemplate} sortable filter />
            <Column header="Équipe" body={equipeBodyTemplate} sortable filter />
            <Column header="Progression" body={progressionBodyTemplate} sortable />
            <Column header="Actions" body={actionsBodyTemplate} />
          </DataTable>
        </Card>
      </div>
    </div>
  );
}