import React, { useState } from 'react';
import { FileText, Download, Calendar, Clock, MapPin, Users, FileWarning, Scale } from 'lucide-react';

const PoliceReportForm = () => {
  const [formData, setFormData] = useState({
    date: '',
    heure: '',
    lieu: '',
    intervenants: '',
    faits: '',
    mesures: '',
    articles: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const generatePDF = () => {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    
    // Header
    doc.setFontSize(18);
    doc.setFont(undefined, 'bold');
    doc.text('RAPPORT DE POLICE MUNICIPALE', 105, 20, { align: 'center' });
    doc.text('NOUVELLE-CALÉDONIE', 105, 28, { align: 'center' });
    
    doc.setLineWidth(0.5);
    doc.line(20, 32, 190, 32);
    
    let y = 45;
    doc.setFontSize(12);
    
    // Date et Heure
    doc.setFont(undefined, 'bold');
    doc.text('DATE :', 20, y);
    doc.setFont(undefined, 'normal');
    doc.text(formData.date || 'Non renseigné', 50, y);
    
    doc.setFont(undefined, 'bold');
    doc.text('HEURE :', 120, y);
    doc.setFont(undefined, 'normal');
    doc.text(formData.heure || 'Non renseignée', 145, y);
    y += 10;
    
    // Lieu
    doc.setFont(undefined, 'bold');
    doc.text('LIEU DE L\'INTERVENTION :', 20, y);
    y += 7;
    doc.setFont(undefined, 'normal');
    const lieuLines = doc.splitTextToSize(formData.lieu || 'Non renseigné', 170);
    doc.text(lieuLines, 20, y);
    y += lieuLines.length * 7 + 8;
    
    // Intervenants
    doc.setFont(undefined, 'bold');
    doc.text('INTERVENANTS :', 20, y);
    y += 7;
    doc.setFont(undefined, 'normal');
    const intervenantLines = doc.splitTextToSize(formData.intervenants || 'Non renseigné', 170);
    doc.text(intervenantLines, 20, y);
    y += intervenantLines.length * 7 + 8;
    
    // Faits constatés
    doc.setFont(undefined, 'bold');
    doc.text('FAITS CONSTATÉS :', 20, y);
    y += 7;
    doc.setFont(undefined, 'normal');
    const faitsLines = doc.splitTextToSize(formData.faits || 'Non renseigné', 170);
    doc.text(faitsLines, 20, y);
    y += faitsLines.length * 7 + 8;
    
    // Check if new page needed
    if (y > 240) {
      doc.addPage();
      y = 20;
    }
    
    // Mesures prises
    doc.setFont(undefined, 'bold');
    doc.text('MESURES PRISES :', 20, y);
    y += 7;
    doc.setFont(undefined, 'normal');
    const mesuresLines = doc.splitTextToSize(formData.mesures || 'Non renseigné', 170);
    doc.text(mesuresLines, 20, y);
    y += mesuresLines.length * 7 + 8;
    
    // Check if new page needed
    if (y > 240) {
      doc.addPage();
      y = 20;
    }
    
    // Articles de loi
    doc.setFont(undefined, 'bold');
    doc.text('ARTICLES DE LOI APPLICABLES (NC) :', 20, y);
    y += 7;
    doc.setFont(undefined, 'normal');
    const articlesLines = doc.splitTextToSize(formData.articles || 'Non renseigné', 170);
    doc.text(articlesLines, 20, y);
    y += articlesLines.length * 7 + 15;
    
    // Signature area
    if (y > 250) {
      doc.addPage();
      y = 20;
    }
    
    doc.setFont(undefined, 'bold');
    doc.text('Fait à _________________, le _________________', 20, y);
    y += 15;
    doc.text('Signature et cachet :', 20, y);
    
    // Download
    doc.save(`rapport_police_NC_${formData.date || 'sans_date'}.pdf`);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 py-8 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="bg-white rounded-lg shadow-xl overflow-hidden">
          <div className="bg-gradient-to-r from-blue-600 to-blue-800 px-8 py-6">
            <div className="flex items-center justify-center gap-3 mb-2">
              <FileText className="text-white" size={32} />
              <h1 className="text-3xl font-bold text-white">Rapport de Police Municipale</h1>
            </div>
            <p className="text-blue-100 text-center">Nouvelle-Calédonie</p>
          </div>

          <div className="p-8">
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                    <Calendar size={18} className="text-blue-600" />
                    Date
                  </label>
                  <input
                    type="date"
                    name="date"
                    value={formData.date}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  />
                </div>
                <div>
                  <label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                    <Clock size={18} className="text-blue-600" />
                    Heure
                  </label>
                  <input
                    type="time"
                    name="heure"
                    value={formData.heure}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  />
                </div>
              </div>

              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                  <MapPin size={18} className="text-blue-600" />
                  Lieu de l'intervention
                </label>
                <input
                  type="text"
                  name="lieu"
                  value={formData.lieu}
                  onChange={handleChange}
                  placeholder="Adresse complète, commune..."
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                  <Users size={18} className="text-blue-600" />
                  Intervenants
                </label>
                <textarea
                  name="intervenants"
                  value={formData.intervenants}
                  onChange={handleChange}
                  placeholder="Noms, grades, matricules des agents intervenants..."
                  rows={3}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                  <FileWarning size={18} className="text-blue-600" />
                  Faits constatés
                </label>
                <textarea
                  name="faits"
                  value={formData.faits}
                  onChange={handleChange}
                  placeholder="Description détaillée des faits constatés..."
                  rows={6}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                  <FileText size={18} className="text-blue-600" />
                  Mesures prises
                </label>
                <textarea
                  name="mesures"
                  value={formData.mesures}
                  onChange={handleChange}
                  placeholder="Actions entreprises, sanctions, suite donnée..."
                  rows={4}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                  <Scale size={18} className="text-blue-600" />
                  Articles de loi applicables (NC)
                </label>
                <textarea
                  name="articles"
                  value={formData.articles}
                  onChange={handleChange}
                  placeholder="Références aux articles du code pénal NC, délibérations, arrêtés..."
                  rows={3}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div className="pt-4">
                <button
                  type="button"
                  onClick={generatePDF}
                  className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-200 flex items-center justify-center gap-2"
                >
                  <Download size={20} />
                  Télécharger le rapport PDF
                </button>
              </div>
            </div>

            <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
              <p className="text-sm text-blue-800 text-center">
                <strong>Note :</strong> Ce formulaire fonctionne entièrement dans votre navigateur. 
                Aucune donnée n'est envoyée ou sauvegardée sur un serveur.
              </p>
            </div>
          </div>
        </div>
      </div>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    </div>
  );
};

export default PoliceReportForm;