import React, { useState, useEffect } from 'react';
import { Camera, FileText, Calendar, User, MapPin } from 'lucide-react';

const CraneInspectionReport = () => {
  const [inspectionData, setInspectionData] = useState(null);
  const [loading, setLoading] = useState(true);

  // Mock data structure that would come from your database
  const mockInspectionData = {
    reportInfo: {
      reportId: "INS-2025-001",
      craneId: "CR-001",
      inspectionDate: "2025-06-10",
      inspector: "John Smith",
      location: "Platform A",
      frequency: "3-6 MONTHLY"
    },
    sections: {
      boom: {
        title: "Boom",
        items: [
          { id: 1, description: "Check all sheaves for wear, damage, and remove excess builds up of rope grease", photos: ["photo1.jpg", "photo2.jpg"], status: "OK", notes: "Minor grease buildup cleaned" },
          { id: 2, description: "Check sheave bearing and pin condition", photos: ["photo3.jpg"], status: "OK", notes: "" },
          { id: 3, description: "Visually examine boom cord and lattices for sign of corrosion", photos: ["photo4.jpg"], status: "ATTENTION", notes: "Spot corrosion found on boom cord section 3" },
          { id: 4, description: "spot corrosion must be follow up by surface brushing and touch up painting", photos: ["photo5.jpg"], status: "COMPLETED", notes: "Surface brushed and painted" },
          { id: 5, description: "Check lubrication and secures of boom pivot/foot pins and lock plate bolts", photos: ["photo6.jpg"], status: "OK", notes: "" },
          { id: 6, description: "Check belt tension, wear & tear", photos: ["photo7.jpg"], status: "OK", notes: "" },
          { id: 7, description: "Check security of access ladders and walkways", photos: ["photo8.jpg"], status: "OK", notes: "" },
          { id: 8, description: "Check swing limit operation", photos: ["photo9.jpg"], status: "OK", notes: "" }
        ]
      },
      aFrame: {
        title: "'A' Frame",
        items: [
          { id: 1, description: "Visually inspect the 'A' frame for signs of paint cracking around welds and sign of corrosion", photos: ["photo10.jpg"], status: "OK", notes: "" },
          { id: 2, description: "spot corrosion must be follow up by surface brushing and touch up painting", photos: ["photo11.jpg"], status: "N/A", notes: "" },
          { id: 3, description: "Check security of 'A' frame bolts", photos: ["photo12.jpg"], status: "OK", notes: "" },
          { id: 4, description: "Check maintenance runway beam for defects. Check bolt tightness", photos: ["photo13.jpg"], status: "OK", notes: "" }
        ]
      },
      wireRopes: {
        title: "Wire Ropes and Hooks",
        items: [
          { id: 1, description: "Inspect main, auxiliary, boom and pendant wire ropes for wear broken, defect or damage", photos: ["photo14.jpg"], status: "OK", notes: "" },
          { id: 2, description: "if broken wire please mention on how many broken wire at what layer/ angle at what strand / lay length", photos: ["photo15.jpg"], status: "N/A", notes: "" },
          { id: 3, description: "Ensure ropes are spooled correctly on drums", photos: ["photo16.jpg"], status: "OK", notes: "" },
          { id: 4, description: "Examine hoist rope connection to swivel on hook and check safety latch and links", photos: ["photo17.jpg"], status: "OK", notes: "" },
          { id: 5, description: "Lubricate wire ropes as necessary", photos: ["photo18.jpg"], status: "COMPLETED", notes: "All wire ropes lubricated" },
          { id: 6, description: "Wire rope termination at winch condition", photos: ["photo19.jpg"], status: "OK", notes: "" }
        ]
      },
      hydraulicSystem: {
        title: "Hydraulic System",
        items: [
          { id: 1, description: "Check that standby emergency brake release equipment is in good order", photos: ["photo20.jpg"], status: "OK", notes: "" },
          { id: 2, description: "Visually inspect hydraulic hoses for leakage and security", photos: ["photo21.jpg"], status: "OK", notes: "" },
          { id: 3, description: "Check all hydraulic filter condition", photos: ["photo22.jpg"], status: "REPLACED", notes: "Filter replaced during inspection" },
          { id: 4, description: "Check anti cavitation switch and operation", photos: ["photo23.jpg"], status: "OK", notes: "" }
        ]
      },
      engineRunning: {
        title: "With Engine Running",
        items: [
          { id: 1, description: "Check that all mounting bolts are tight", photos: ["photo24.jpg"], status: "OK", notes: "" },
          { id: 2, description: "Check gearbox oil level. Top up as required./6M", photos: ["photo25.jpg"], status: "TOPPED_UP", notes: "Oil level low, topped up" }
        ]
      }
    }
  };

  // Simulate database fetch
  useEffect(() => {
    const fetchInspectionData = async () => {
      setLoading(true);
      // Simulate API call
      setTimeout(() => {
        setInspectionData(mockInspectionData);
        setLoading(false);
      }, 1000);
    };

    fetchInspectionData();
  }, []);

  const getStatusColor = (status) => {
    switch (status) {
      case 'OK': return 'text-green-600 bg-green-50';
      case 'ATTENTION': return 'text-red-600 bg-red-50';
      case 'COMPLETED': return 'text-blue-600 bg-blue-50';
      case 'REPLACED': return 'text-purple-600 bg-purple-50';
      case 'TOPPED_UP': return 'text-orange-600 bg-orange-50';
      case 'N/A': return 'text-gray-600 bg-gray-50';
      default: return 'text-gray-600 bg-gray-50';
    }
  };

  const InspectionSection = ({ title, items, sectionNumber }) => (
    <div className="mb-8 bg-white rounded-lg shadow-sm border border-gray-200">
      <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
        <h2 className="text-lg font-semibold text-gray-800">
          {sectionNumber} {title}
        </h2>
      </div>
      
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-100">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider border-r border-gray-200 w-16">
                Photo No
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider border-r border-gray-200">
                Description
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider border-r border-gray-200 w-32">
                Status
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider border-r border-gray-200 w-40">
                Photo 1
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider border-r border-gray-200 w-40">
                Photo 2
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider w-40">
                Photo 3
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {items.map((item, index) => (
              <tr key={item.id} className="hover:bg-gray-50">
                <td className="px-4 py-4 text-sm font-medium text-gray-900 border-r border-gray-200 text-center">
                  {item.id}
                </td>
                <td className="px-4 py-4 text-sm text-gray-700 border-r border-gray-200">
                  <div className="space-y-1">
                    <p>{item.description}</p>
                    {item.notes && (
                      <p className="text-xs text-blue-600 italic">Note: {item.notes}</p>
                    )}
                  </div>
                </td>
                <td className="px-4 py-4 text-sm border-r border-gray-200">
                  <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(item.status)}`}>
                    {item.status}
                  </span>
                </td>
                <td className="px-4 py-4 border-r border-gray-200">
                  <div className="flex items-center justify-center h-20 bg-gray-100 rounded border-2 border-dashed border-gray-300">
                    <Camera className="h-6 w-6 text-gray-400" />
                  </div>
                </td>
                <td className="px-4 py-4 border-r border-gray-200">
                  <div className="flex items-center justify-center h-20 bg-gray-100 rounded border-2 border-dashed border-gray-300">
                    <Camera className="h-6 w-6 text-gray-400" />
                  </div>
                </td>
                <td className="px-4 py-4">
                  <div className="flex items-center justify-center h-20 bg-gray-100 rounded border-2 border-dashed border-gray-300">
                    <Camera className="h-6 w-6 text-gray-400" />
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      
      <div className="bg-gray-50 px-6 py-3 border-t border-gray-200">
        <p className="text-sm text-gray-600 font-medium">
          &lt;&lt;&lt; Click here to key in {title}
        </p>
      </div>
    </div>
  );

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading inspection report...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-gray-900">Crane Inspection Report</h1>
              <p className="text-sm text-red-600 font-medium mt-1">For Internal Use - For Internal Distribution Only</p>
            </div>
            <div className="flex items-center space-x-4">
              <FileText className="h-8 w-8 text-blue-500" />
            </div>
          </div>
        </div>
      </div>

      {/* Report Info */}
      <div className="max-w-7xl mx-auto px-4 py-6">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
          <div className="px-6 py-4 border-b border-gray-200 bg-blue-50">
            <h2 className="text-lg font-semibold text-gray-800">{inspectionData.reportInfo.frequency}</h2>
          </div>
          <div className="px-6 py-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">Report ID</p>
                  <p className="font-semibold">{inspectionData.reportInfo.reportId}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <Calendar className="h-5 w-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">Inspection Date</p>
                  <p className="font-semibold">{inspectionData.reportInfo.inspectionDate}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <User className="h-5 w-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">Inspector</p>
                  <p className="font-semibold">{inspectionData.reportInfo.inspector}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <MapPin className="h-5 w-5 text-gray-400" />
                <div>
                  <p className="text-sm text-gray-600">Location</p>
                  <p className="font-semibold">{inspectionData.reportInfo.location}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <div className="h-5 w-5 bg-blue-500 rounded flex items-center justify-center">
                  <span className="text-white text-xs font-bold">C</span>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Crane ID</p>
                  <p className="font-semibold">{inspectionData.reportInfo.craneId}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Photo Guidelines */}
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
          <h3 className="text-sm font-semibold text-yellow-800 mb-2">Photo Guidelines:</h3>
          <ul className="text-sm text-yellow-700 space-y-1">
            <li>1. One photo per cell, no annotation from excel. Max 50 Photos - preferably .jpeg</li>
            <li>2. If require annotation, please do in other app and save as picture (or Snip as whole image)</li>
          </ul>
        </div>

        {/* Inspection Sections */}
        <InspectionSection 
          title={inspectionData.sections.boom.title}
          items={inspectionData.sections.boom.items}
          sectionNumber="1.1"
        />
        
        <InspectionSection 
          title={inspectionData.sections.aFrame.title}
          items={inspectionData.sections.aFrame.items}
          sectionNumber="1.2"
        />
        
        <InspectionSection 
          title={inspectionData.sections.wireRopes.title}
          items={inspectionData.sections.wireRopes.items}
          sectionNumber="1.3"
        />
        
        <InspectionSection 
          title={inspectionData.sections.hydraulicSystem.title}
          items={inspectionData.sections.hydraulicSystem.items}
          sectionNumber="1.4"
        />
        
        <InspectionSection 
          title={inspectionData.sections.engineRunning.title}
          items={inspectionData.sections.engineRunning.items}
          sectionNumber="1.5"
        />

        {/* Footer */}
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 mt-8">
          <p className="text-sm text-red-600 font-medium text-center">
            For Internal Use - For Internal Distribution Only
          </p>
        </div>
      </div>
    </div>
  );
};

export default CraneInspectionReport;