form

import React, { useState } from 'react';

const PropertyInspectionForm = () => {
  // State for form data
  const [formData, setState] = useState({
    name: '',
    address: '',
    unitNumber: ''
  });
  
  // State for checklist items
  const [checklistItems, setChecklistItems] = useState([
    // General items
    { id: 'walls', category: 'General', name: 'Walls', status: '', notes: '' },
    { id: 'ceilings', category: 'General', name: 'Ceilings', status: '', notes: '' },
    { id: 'flooring', category: 'General', name: 'Flooring', status: '', notes: '' },
    { id: 'windows', category: 'General', name: 'Windows', status: '', notes: '' },
    { id: 'doors', category: 'General', name: 'Doors', status: '', notes: '' },
    { id: 'lighting', category: 'General', name: 'Lighting Fixtures', status: '', notes: '' },
    { id: 'smoke', category: 'General', name: 'Smoke/CO Detectors', status: '', notes: '' },
    { id: 'hvac', category: 'General', name: 'HVAC System', status: '', notes: '' },
    
    // Kitchen items
    { id: 'refrigerator', category: 'Kitchen', name: 'Refrigerator', status: '', notes: '' },
    { id: 'stove', category: 'Kitchen', name: 'Oven/Stove', status: '', notes: '' },
    { id: 'dishwasher', category: 'Kitchen', name: 'Dishwasher', status: '', notes: '' },
    { id: 'microwave', category: 'Kitchen', name: 'Microwave', status: '', notes: '' },
    { id: 'disposal', category: 'Kitchen', name: 'Disposal', status: '', notes: '' },
    { id: 'sink', category: 'Kitchen', name: 'Sink/Faucet', status: '', notes: '' },
    { id: 'cabinets', category: 'Kitchen', name: 'Cabinets/Drawers', status: '', notes: '' },
    
    // Bathroom items
    { id: 'toilet', category: 'Bathroom', name: 'Toilet', status: '', notes: '' },
    { id: 'tub', category: 'Bathroom', name: 'Tub/Shower', status: '', notes: '' },
    { id: 'bathSink', category: 'Bathroom', name: 'Sink/Faucet', status: '', notes: '' },
    { id: 'vent', category: 'Bathroom', name: 'Ventilation Fan', status: '', notes: '' },
    { id: 'bathCabinets', category: 'Bathroom', name: 'Cabinets/Storage', status: '', notes: '' },
    
    // Laundry items
    { id: 'washer', category: 'Laundry', name: 'Washer', status: '', notes: '' },
    { id: 'dryer', category: 'Laundry', name: 'Dryer', status: '', notes: '' },
    { id: 'hookups', category: 'Laundry', name: 'Hookups', status: '', notes: '' },
    
    // Bedroom items
    { id: 'closet', category: 'Bedrooms', name: 'Closet Doors', status: '', notes: '' },
    { id: 'shelving', category: 'Bedrooms', name: 'Shelving', status: '', notes: '' },
    { id: 'windowCover', category: 'Bedrooms', name: 'Window Coverings', status: '', notes: '' },
    
    // Exterior items
    { id: 'roof', category: 'Exterior', name: 'Roof', status: '', notes: '' },
    { id: 'gutters', category: 'Exterior', name: 'Gutters', status: '', notes: '' },
    { id: 'landscaping', category: 'Exterior', name: 'Landscaping', status: '', notes: '' },
    { id: 'exterior', category: 'Exterior', name: 'Exterior Walls/Paint', status: '', notes: '' },
    { id: 'entryways', category: 'Exterior', name: 'Entryways/Porches', status: '', notes: '' }
  ]);

  // State for preview mode
  const [showPreview, setShowPreview] = useState(false);
  
  // State for download dialog
  const [showDownloadDialog, setShowDownloadDialog] = useState(false);
  
  // Generate filename for download
  const generateFilename = () => {
    const address = formData.address.replace(/[^a-z0-9]/gi, '-').toLowerCase() || 'property';
    const unit = formData.unitNumber ? `-unit-${formData.unitNumber}` : '';
    const date = new Date().toISOString().split('T')[0];
    return `inspection-${address}${unit}-${date}.pdf`;
  };

  // Handle form input changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setState({
      ...formData,
      [name]: value
    });
  };

  // Handle status selection for an item
  const handleStatusChange = (id, value) => {
    setChecklistItems(
      checklistItems.map(item => 
        item.id === id ? { ...item, status: value } : item
      )
    );
  };

  // Handle notes input for an item
  const handleNotesChange = (id, value) => {
    setChecklistItems(
      checklistItems.map(item => 
        item.id === id ? { ...item, notes: value } : item
      )
    );
  };

  // Toggle preview mode to see filtered results
  const togglePreview = () => {
    setShowPreview(!showPreview);
    if (showDownloadDialog) {
      setShowDownloadDialog(false);
    }
  };

  // Filter items that have been checked or have notes
  const filteredItems = checklistItems.filter(item => 
    item.status !== '' || item.notes !== ''
  );

  // Group items by category
  const groupItems = (items) => {
    return items.reduce((acc, item) => {
      if (!acc[item.category]) {
        acc[item.category] = [];
      }
      acc[item.category].push(item);
      return acc;
    }, {});
  };

  const groupedItems = groupItems(checklistItems);
  const filteredGroupedItems = groupItems(filteredItems);

  // Export PDF (simulated)
  const exportPDF = () => {
    setShowPreview(true);
    setShowDownloadDialog(true);
  };

  // Simulate download completion
  const simulateDownload = () => {
    setTimeout(() => {
      setShowDownloadDialog(false);
      alert("Download complete! In a real implementation, the PDF would now be saved to your device.");
    }, 1500);
  };

  // Date formatting for the report
  const formattedDate = new Date().toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return (
    <div className="p-4 max-w-6xl mx-auto bg-white">
      {!showPreview ? (
        <>
          <h1 className="text-2xl font-bold mb-6 text-center">Property Inspection Checklist</h1>
          <div className="mb-6 p-4 bg-gray-50 rounded-lg">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block text-gray-700 mb-1">Name:</label>
                <input
                  type="text"
                  name="name"
                  value={formData.name}
                  onChange={handleInputChange}
                  className="w-full border border-gray-300 p-2 rounded"
                />
              </div>
              <div>
                <label className="block text-gray-700 mb-1">Address:</label>
                <input
                  type="text"
                  name="address"
                  value={formData.address}
                  onChange={handleInputChange}
                  className="w-full border border-gray-300 p-2 rounded"
                />
              </div>
              <div>
                <label className="block text-gray-700 mb-1">Unit #:</label>
                <input
                  type="text"
                  name="unitNumber"
                  value={formData.unitNumber}
                  onChange={handleInputChange}
                  className="w-full border border-gray-300 p-2 rounded"
                />
              </div>
            </div>
          </div>

          <div className="mb-6 relative">
            <div className="border border-gray-300 rounded-lg overflow-hidden">
              <table className="w-full">
                <thead className="sticky top-0 z-10">
                  <tr className="bg-gray-100">
                    <th className="py-2 px-4 text-left w-1/4">Status</th>
                    <th className="py-2 px-2 text-center border-l border-gray-300">OK</th>
                    <th className="py-2 px-2 text-center border-l border-gray-300">Repair</th>
                    <th className="py-2 px-2 text-center border-l border-gray-300">Replace</th>
                    <th className="py-2 px-2 text-center border-l border-gray-300">Update</th>
                    <th className="py-2 px-4 text-left border-l border-gray-300">Notes</th>
                  </tr>
                </thead>
                <tbody>
                  {Object.entries(groupedItems).map(([category, items]) => (
                    <React.Fragment key={category}>
                      <tr className="bg-gray-200">
                        <td colSpan="6" className="py-2 px-4 font-bold">{category}</td>
                      </tr>
                      {items.map((item) => (
                        <tr key={item.id} className="border-t border-gray-300">
                          <td className="py-2 px-4 border-r border-gray-300">{item.name}</td>
                          <td 
                            className="text-center border-r border-gray-300 cursor-pointer hover:bg-gray-100"
                            onClick={() => handleStatusChange(item.id, 'OK')}
                          >
                            <div className="flex items-center justify-center h-full">
                              <input 
                                type="radio" 
                                name={`status_${item.id}`} 
                                checked={item.status === 'OK'}
                                onChange={() => {}}
                                onClick={(e) => e.stopPropagation()}
                              />
                            </div>
                          </td>
                          <td 
                            className="text-center border-r border-gray-300 cursor-pointer hover:bg-gray-100"
                            onClick={() => handleStatusChange(item.id, 'Repair')}
                          >
                            <div className="flex items-center justify-center h-full">
                              <input 
                                type="radio" 
                                name={`status_${item.id}`} 
                                checked={item.status === 'Repair'}
                                onChange={() => {}}
                                onClick={(e) => e.stopPropagation()}
                              />
                            </div>
                          </td>
                          <td 
                            className="text-center border-r border-gray-300 cursor-pointer hover:bg-gray-100"
                            onClick={() => handleStatusChange(item.id, 'Replace')}
                          >
                            <div className="flex items-center justify-center h-full">
                              <input 
                                type="radio" 
                                name={`status_${item.id}`} 
                                checked={item.status === 'Replace'}
                                onChange={() => {}}
                                onClick={(e) => e.stopPropagation()}
                              />
                            </div>
                          </td>
                          <td 
                            className="text-center border-r border-gray-300 cursor-pointer hover:bg-gray-100"
                            onClick={() => handleStatusChange(item.id, 'Update')}
                          >
                            <div className="flex items-center justify-center h-full">
                              <input 
                                type="radio" 
                                name={`status_${item.id}`} 
                                checked={item.status === 'Update'}
                                onChange={() => {}}
                                onClick={(e) => e.stopPropagation()}
                              />
                            </div>
                          </td>
                          <td className="py-1 px-2">
                            <input
                              type="text"
                              value={item.notes}
                              onChange={(e) => handleNotesChange(item.id, e.target.value)}
                              className="w-full border border-gray-300 p-1 rounded"
                            />
                          </td>
                        </tr>
                      ))}
                    </React.Fragment>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          <div className="flex justify-between items-center">
            <div className="p-4 border border-gray-300 rounded-lg bg-gray-50 text-sm max-w-md">
              <p className="font-semibold mb-2">Form Instructions:</p>
              <p>This form is meant to be used when going through duplexes to update them before new tenants move in.</p>
              <p className="mt-2">All items should be checked before the move-in date.</p>
            </div>
            <div className="space-x-4">
              <button 
                onClick={togglePreview}
                className="bg-gray-600 text-white py-2 px-6 rounded hover:bg-gray-700"
              >
                Preview Export
              </button>
              <button 
                onClick={exportPDF}
                className="bg-blue-600 text-white py-2 px-6 rounded hover:bg-blue-700"
              >
                Export as PDF
              </button>
            </div>
          </div>
        </>
      ) : (
        // Preview mode - shows only items that would be exported
        <div className="print:text-black relative">
          {/* Download Dialog */}
          {showDownloadDialog && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
              <div className="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
                <h3 className="text-xl font-bold mb-4">Download PDF Report</h3>
                <p className="mb-4">Your report is ready to download.</p>
                <div className="bg-gray-100 p-3 rounded flex items-center mb-4">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-red-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                  </svg>
                  <span className="flex-1 truncate">{generateFilename()}</span>
                </div>
                <div className="flex justify-end space-x-3">
                  <button 
                    onClick={() => setShowDownloadDialog(false)}
                    className="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100"
                  >
                    Cancel
                  </button>
                  <button 
                    onClick={simulateDownload}
                    className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                  >
                    Download
                  </button>
                </div>
              </div>
            </div>
          )}

          <div className="flex justify-between items-center mb-6">
            <h1 className="text-2xl font-bold">Property Inspection Report</h1>
            <div className="space-x-3">
              <button 
                onClick={exportPDF}
                className="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 print:hidden"
              >
                Download PDF
              </button>
              <button 
                onClick={togglePreview}
                className="bg-gray-600 text-white py-2 px-4 rounded hover:bg-gray-700 print:hidden"
              >
                Back to Form
              </button>
            </div>
          </div>
          
          <div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-300">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <p className="font-semibold">Property:</p>
                <p>{formData.address || '[Address]'}</p>
                <p>Unit: {formData.unitNumber || '[Unit #]'}</p>
              </div>
              <div>
                <p className="font-semibold">Inspector:</p>
                <p>{formData.name || '[Inspector Name]'}</p>
              </div>
              <div>
                <p className="font-semibold">Date:</p>
                <p>{formattedDate}</p>
              </div>
            </div>
          </div>

          {Object.keys(filteredGroupedItems).length === 0 ? (
            <div className="p-8 text-center bg-gray-50 rounded-lg border border-gray-300">
              <p className="text-gray-500">No items have been checked or noted yet. Complete the form to see items here.</p>
            </div>
          ) : (
            <div className="border border-gray-300 rounded-lg overflow-hidden mb-6">
              <table className="w-full">
                <thead>
                  <tr className="bg-gray-100">
                    <th className="py-2 px-4 text-left">Item</th>
                    <th className="py-2 px-4 text-left border-l border-gray-300">Status</th>
                    <th className="py-2 px-4 text-left border-l border-gray-300">Notes</th>
                  </tr>
                </thead>
                <tbody>
                  {Object.entries(filteredGroupedItems).map(([category, items]) => (
                    <React.Fragment key={category}>
                      <tr className="bg-gray-200">
                        <td colSpan="3" className="py-2 px-4 font-bold">{category}</td>
                      </tr>
                      {items.map((item) => (
                        <tr key={item.id} className="border-t border-gray-300">
                          <td className="py-2 px-4 border-r border-gray-300">{item.name}</td>
                          <td className="py-2 px-4 border-r border-gray-300">
                            {item.status || 'Not specified'}
                          </td>
                          <td className="py-2 px-4">{item.notes}</td>
                        </tr>
                      ))}
                    </React.Fragment>
                  ))}
                </tbody>
              </table>
            </div>
          )}
          
          <div className="mt-8 border-t border-gray-300 pt-4">
            <p className="font-semibold">Inspection Summary:</p>
            <p className="mt-2">This report includes only items that require attention or have notes.</p>
            <p className="mt-4">
              <span className="font-semibold">Inspected by:</span> {formData.name || '____________________'}
            </p>
            <p className="mt-2">
              <span className="font-semibold">Date:</span> {formattedDate}
            </p>
          </div>
        </div>
      )}
    </div>
  );
};

export default PropertyInspectionForm;