import React, { useState, useCallback, useRef, useMemo } from 'react';

// --- Global Constants and Utilities ---

const API_KEY = "";
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${API_KEY}`;

const coralColors = {
    light: '#FEECE7',
    DEFAULT: '#E76E55', // The primary coral color
    dark: '#D45A4A',
};

// Utility to convert File to Base64
const fileToBase64 = (file) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        
        // Always read the file as an ArrayBuffer/DataURL for robust handling of binary files (like PDF)
        // This is necessary because PDFs cannot be reliably read as text.
        reader.readAsDataURL(file); 
        
        reader.onload = () => {
             // Extract the Base64 data part (after the comma in the data URL)
             // Example: "data:application/pdf;base64,JVBERi0xLjc..." -> "JVBERi0xLjc..."
             resolve(reader.result.split(',')[1]);
        };
        reader.onerror = error => reject(error);
    });
};

// Utility for API call with exponential backoff
const fetchWithBackoff = async (url, options, maxRetries = 5, delay = 1000) => {
    for (let i = 0; i < maxRetries; i++) {
        try {
            const response = await fetch(url, options);
            if (response.status === 429 && i < maxRetries - 1) {
                await new Promise(resolve => setTimeout(resolve, delay));
                delay *= 2;
                continue;
            }
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response;
        } catch (error) {
            if (i === maxRetries - 1) throw error;
            await new Promise(resolve => setTimeout(resolve, delay));
            delay *= 2;
        }
    }
};

// --- API Schemas and Prompts ---

const responseSchemaOCR = {
    type: "OBJECT",
    properties: {
        physicalId: {
            type: "STRING",
            // UPDATED: Removed hyphen restriction. Retained length minimum.
            description: "The unique Physical ID extracted from the image. MUST be more than 4 characters long."
        },
        taskId: {
            type: "STRING",
            description: "A simulated task ID that this reel is being associated with (e.g., TSK-1093)."
        },
        confidence: {
            type: "NUMBER",
            description: "Confidence level of the OCR extraction, ranging from 0.0 to 1.0."
        }
    },
    required: ["physicalId", "taskId", "confidence"]
};

const responseSchemaInvoice = {
    type: "OBJECT",
    properties: {
        extractedItems: {
            type: "ARRAY",
            description: "An array of extracted fiber asset items, each containing a Physical ID, Type, Quantity, and Status.",
            items: {
                type: "OBJECT",
                properties: {
                    physicalId: { type: "STRING", description: "The unique Physical ID." },
                    type: { type: "STRING", description: "The material type, e.g., '12F', '24F', '48F'." },
                    quantity: { type: "STRING", description: "The length or quantity as a string (e.g., '100', '123', '10000')." },
                    status: { type: "STRING", description: "The status, e.g., 'live' or 'expended'." }
                },
                required: ["physicalId", "type", "quantity", "status"]
            }
        }
    },
    required: ["extractedItems"]
};

// --- Placeholder Component for Task Form Fields (Mobile optimized) ---

const TaskField = ({ label, type = 'text', options, fieldNumber, value, onChange }) => {
    const isDropdown = type === 'dropdown' && options;
    const isInput = type === 'text';

    // Determine props for dropdown: if value/onChange are provided, use them. 
    // Otherwise, let the element be uncontrolled (or default to empty string value)
    const dropdownProps = isDropdown && value !== undefined && onChange
        ? { value, onChange }
        : { defaultValue: value || '' }; // Use defaultValue for non-controlled inputs

    return (
        <div className="mb-4">
            <label className="block text-xs font-semibold uppercase mb-1" style={{ color: coralColors.dark }}>
                {fieldNumber}. {label}
            </label>
            {isInput && (
                <input 
                    type="text" 
                    placeholder={`Enter value for ${label}`} 
                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-1 focus:ring-opacity-50"
                    style={{ borderColor: coralColors.light, focusRingColor: coralColors.DEFAULT }}
                />
            )}
            {isDropdown && (
                <select 
                    {...dropdownProps}
                    className="w-full p-3 border border-gray-300 rounded-lg appearance-none bg-white focus:ring-1 focus:ring-opacity-50"
                    style={{ borderColor: coralColors.light, focusRingColor: coralColors.DEFAULT }}
                >
                    <option value="">Select an option</option>
                    {options.map((option, index) => (
                        <option key={index} value={option}>{option}</option>
                    ))}
                </select>
            )}
        </div>
    );
};

// --- Component Definitions ---

export default function App() {
    // Set 'invoice' as the new default active tab
    const [activeTab, setActiveTab] = useState('invoice'); 
    // State to manage which fields are visible in the Task Form
    const [selectedWorkActivity, setSelectedWorkActivity] = useState('AERIAL Cable Installation'); 
    
    // NEW state for manual entry toggle
    const [isManualEntry, setIsManualEntry] = useState(false);
    // NEW state to hold the manually or extracted Physical ID value
    const [physicalIdValue, setPhysicalIdValue] = useState('');
    // NEW state for copy button feedback
    const [copyStatus, setCopyStatus] = useState(null); 

    // State for Function 1: OCR/Scan (used in taskForm)
    const [ocrState, setOcrState] = useState({
        file: null,
        preview: 'https://placehold.co/400x300/f3f4f6/333333?text=No+Image+Selected', 
        result: null,
        loading: false,
        error: null
    });
    const ocrInputRef = useRef(null);
    
    // NEW State for the File Upload Field in Task Form (Field 23)
    const [formFileState, setFormFileState] = useState({
        file: null,
        fileName: 'No file attached',
        dropzoneStyle: {
            borderColor: coralColors.light,
            backgroundColor: 'white',
        }
    });
    const formFileInputRef = useRef(null);
    const formFileDropzoneRef = useRef(null);


    // State for Function 2: Invoice Parsing (used in invoice tab)
    const [invoiceState, setInvoiceState] = useState({
        file: null,
        fileName: 'No file selected',
        items: [],
        loading: false,
        error: null
    });
    const csvInputRef = useRef(null);
    const dropzoneRef = useRef(null);

    // --- Handlers for Function 1: OCR / Scan ---

    const handleOcrFileChange = useCallback((e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                setOcrState(prev => ({
                    ...prev,
                    file: file,
                    preview: e.target.result,
                    error: null,
                    result: null
                }));
                // Reset manual entry on new file selection
                setIsManualEntry(false);
            };
            reader.readAsDataURL(file);
        }
        e.target.value = null; 
    }, []);

    const processReelImage = useCallback(async () => {
        if (!ocrState.file) {
            setOcrState(prev => ({ ...prev, error: `Please capture or upload an image file.` }));
            return;
        }
        
        // Reset manual mode if processing starts
        setIsManualEntry(false);

        setOcrState(prev => ({ ...prev, loading: true, error: null, result: null }));

        try {
            // fileToBase64 handles reading file content for both image and text.
            const fileContent = await fileToBase64(ocrState.file);
            const mimeType = ocrState.file.type;

            // Use the base64 content for image analysis
            const base64Image = fileContent; 

            // UPDATED SYSTEM PROMPT: Added instruction to prioritize largest text/barcode
            const systemPrompt = "Act as a high-precision OCR and asset management system. Analyze the provided image of a fiber optic reel, extract a unique Physical ID (or Reel Identification Number) from the image, and associate it with a simulated task ID. If the sticker contains multiple identifiers, **prioritize the largest and most prominent text/barcode, typically found near the bottom of the sticker**, as the CABLE BATCH NUMBER. The extracted Physical ID MUST be more than 4 characters long. Generate the output as a JSON object based on the required schema.";
            
            const userQuery = "This image was either uploaded or captured in the field. Extract the Physical ID (CABLE BATCH NUMBER) and associated Task ID, focusing on identifying barcode data.";


            const payload = {
                contents: [
                    {
                        role: "user",
                        parts: [
                            { text: userQuery },
                            { inlineData: { mimeType: mimeType, data: base64Image } }
                        ]
                    }
                ],
                systemInstruction: { parts: [{ text: systemPrompt }] },
                generationConfig: {
                    responseMimeType: "application/json",
                    responseSchema: responseSchemaOCR
                }
            };

            const response = await fetchWithBackoff(API_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            const result = await response.json();
            const jsonText = result?.candidates?.[0]?.content?.parts?.[0]?.text;

            if (!jsonText) {
                throw new Error("API response was missing expected JSON content.");
            }

            const data = JSON.parse(jsonText);
            setOcrState(prev => ({ ...prev, result: data, loading: false }));
            setPhysicalIdValue(data.physicalId); // Update the primary value state

        } catch (error) {
            console.error("OCR API Error:", error);
            setOcrState(prev => ({ ...prev, error: `Processing failed: ${error.message}`, loading: false }));
            // Offer manual entry on failure
            setIsManualEntry(true); 
            setPhysicalIdValue('');
        }
    }, [ocrState.file]);
    
    // Handler to copy the physical ID to the clipboard
    const copyPhysicalId = useCallback(() => {
        // Use document.execCommand('copy') for guaranteed function in sandbox environments
        const tempElement = document.createElement('textarea');
        tempElement.value = physicalIdValue;
        document.body.appendChild(tempElement);
        tempElement.select();
        document.execCommand('copy');
        document.body.removeChild(tempElement);

        setCopyStatus('Copied!');
        setTimeout(() => setCopyStatus(null), 1500);
    }, [physicalIdValue]);

    // --- Handlers for Function 2: Invoice Parsing (CSV/PDF) ---

    const handleInvoiceFileSelected = useCallback((file) => {
        if (file) {
            if (!['text/csv', 'application/pdf'].includes(file.type) && !file.name.endsWith('.csv') && !file.name.endsWith('.pdf')) {
                setInvoiceState(prev => ({ ...prev, error: 'Unsupported file type. Please upload a CSV or PDF file.', file: null, fileName: 'No file selected', items: [] }));
                return;
            }
            setInvoiceState(prev => ({ ...prev, file: file, fileName: file.name, error: null, items: [] }));
        } else {
            setInvoiceState(prev => ({ ...prev, file: null, fileName: 'No file selected', items: [] }));
        }
    }, []);

    const handleDrop = useCallback((e) => {
        e.preventDefault();
        dropzoneRef.current.style.borderColor = coralColors.light;
        dropzoneRef.current.style.backgroundColor = 'white';

        const file = e.dataTransfer.files[0];
        handleInvoiceFileSelected(file);
    }, [handleInvoiceFileSelected]);

    const handleDragOver = useCallback((e) => {
        e.preventDefault();
        dropzoneRef.current.style.borderColor = coralColors.DEFAULT;
        dropzoneRef.current.style.backgroundColor = coralColors.light;
    }, []);

    const handleDragLeave = useCallback((e) => {
        e.preventDefault();
        dropzoneRef.current.style.borderColor = coralColors.light;
        dropzoneRef.current.style.backgroundColor = 'white';
    }, []);


    const processInvoiceFile = useCallback(async () => {
        if (!invoiceState.file) {
            setInvoiceState(prev => ({ ...prev, error: `Please upload a CSV or PDF file.` }));
            return;
        }

        setInvoiceState(prev => ({ ...prev, loading: true, error: null, items: [] }));

        try {
            const file = invoiceState.file;
            const mimeType = file.type;
            const fileContentBase64 = await fileToBase64(file);

            const systemPrompt = `Act as an invoice parsing system. Analyze the provided document and extract all line items related to fiber reels. The output MUST strictly conform to the provided JSON schema. Specifically extract 'Physical ID', 'Type', 'Quantity', and 'Status' (assume 'live' if not specified). The input might be raw CSV text or the content of a PDF invoice.`;
            
            // For CSV, we can still use the Base64 content as the text part since it often decodes cleanly.
            // For PDF, we rely purely on inlineData.
            const userQuery = `Process this document (${file.name}) to extract the Physical ID, Type, Quantity, and Status for all fiber assets.`;

            const contents = [
                { role: "user", parts: [{ text: userQuery }] }
            ];

            // If it's CSV, try including the text content in the text part as well (optional, but good for clarity).
            // For the API to handle PDF, we must use inlineData with the base64 content.
            contents[0].parts.push({ inlineData: { mimeType: mimeType, data: fileContentBase64 } });


            const payload = {
                contents: contents,
                systemInstruction: { parts: [{ text: systemPrompt }] },
                generationConfig: {
                    responseMimeType: "application/json",
                    responseSchema: responseSchemaInvoice
                }
            };

            const response = await fetchWithBackoff(API_URL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            const result = await response.json();
            const jsonText = result?.candidates?.[0]?.content?.parts?.[0]?.text;

            if (!jsonText) {
                 throw new Error("API response was missing expected JSON content. Check the input data format or content.");
            }

            const data = JSON.parse(jsonText);
            setInvoiceState(prev => ({ ...prev, items: data.extractedItems, loading: false }));

        } catch (error) {
            console.error("Invoice API Error:", error);
            setInvoiceState(prev => ({ ...prev, error: `Parsing failed. Please check file format and content. Error: ${error.message}`, loading: false }));
        }
    }, [invoiceState.file]);
    
    // --- Handlers for Mobile File Upload (Field 23) ---

    const handleFormFileSelected = useCallback((file) => {
        if (file) {
            setFormFileState(prev => ({ ...prev, file: file, fileName: file.name }));
        } else {
            setFormFileState(prev => ({ ...prev, file: null, fileName: 'No file attached' }));
        }
    }, []);

    const handleFormDrop = useCallback((e) => {
        e.preventDefault();
        // Reset dropzone style after drop
        setFormFileState(prev => ({ ...prev, dropzoneStyle: { borderColor: coralColors.light, backgroundColor: 'white' } }));

        const file = e.dataTransfer.files[0];
        handleFormFileSelected(file);
    }, [handleFormFileSelected]);

    const handleFormDragOver = useCallback((e) => {
        e.preventDefault();
        // Apply hover style
        setFormFileState(prev => ({ ...prev, dropzoneStyle: { borderColor: coralColors.DEFAULT, backgroundColor: coralColors.light } }));
    }, []);

    const handleFormDragLeave = useCallback((e) => {
        e.preventDefault();
        // Reset style
        setFormFileState(prev => ({ ...prev, dropzoneStyle: { borderColor: coralColors.light, backgroundColor: 'white' } }));
    }, []);


    // --- Derived Display Logic (OCR) ---

    const OcrResultDisplay = useMemo(() => {
        const { result, error, loading } = ocrState;

        if (loading) {
            return <p className="text-sm text-gray-500">Processing image data...</p>;
        }
        if (error) {
            // FIX: Ensure this returns a single component structure
            return (
                <div className="flex flex-col items-center">
                    <p className="text-sm text-red-500 mb-2">Processing failed. Try manual entry below.</p>
                    <button onClick={() => setIsManualEntry(true)} className="text-xs font-semibold text-gray-700 hover:text-gray-900 underline">
                        <i className="fas fa-keyboard mr-1"></i> Enter Manually
                    </button>
                </div>
            );
        }
        if (result) {
            // Apply the extracted Physical ID directly to the simulated form field
            const confidenceColor = result.confidence >= 0.8 ? 'text-green-600' : result.confidence >= 0.5 ? 'text-yellow-600' : 'text-red-600';
            
            // This is the simulated result display, which is integrated directly into the form
            return (
                <div className="space-y-3 w-full">
                    <div className="p-3 rounded-lg" style={{ backgroundColor: coralColors.light }}>
                        <p className="text-xs font-semibold uppercase" style={{ color: coralColors.dark }}>Physical ID</p>
                        <p className="text-2xl font-bold text-gray-900">{result.physicalId}</p>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        <div className="p-3 bg-gray-100 rounded-lg">
                            <p className="text-xs text-gray-600 font-semibold uppercase">Associated Task</p>
                            <p className="text-base font-semibold text-gray-900">{result.taskId}</p>
                        </div>
                        <div className="p-3 bg-gray-100 rounded-lg">
                            <p className="text-xs text-gray-600 font-semibold uppercase">Confidence Score</p>
                            {/* FIX: Correct syntax for injecting confidenceColor class */}
                            <p className={`text-base font-semibold ${confidenceColor}`}>{(result.confidence * 100).toFixed(1)}%</p>
                        </div>
                    </div>
                    <p className="text-xs text-gray-500 pt-2 flex items-center justify-center">
                        <i className="fas fa-check-circle text-green-500 mr-1"></i> 
                        Physical ID successfully recorded! 
                        <button onClick={() => setIsManualEntry(true)} className="ml-2 text-xs font-semibold text-gray-700 hover:text-gray-900 underline">
                            (Edit)
                        </button>
                    </p>
                </div>
            );
        }
        return (
            <>
                <i className="fas fa-info-circle text-gray-400 text-3xl mb-2"></i>
                <p className="text-sm text-gray-500">Scan to auto-populate Physical ID field.</p>
            </>
        );
    }, [ocrState, setIsManualEntry]);

    // --- Render Functions ---

    // Custom Component for Header Fields (bold text, no input)
    const FormHeader = ({ label }) => (
        <div className="my-4">
            <h3 className="text-base font-extrabold text-gray-900 uppercase">{label}</h3>
            <hr className="border-t border-gray-200 mt-2" />
        </div>
    );

    // AI Component replacing the Cable BATCH NUMBER dropdown
    const renderCableBatchNumberField = (fieldNumber) => {
        // Retain the actual field name "Cable BATCH NUMBER" as the title
        const title = 'Cable BATCH NUMBER'; 
        const description = 'AI Automation: Tap the button to use your camera for **barcode scanning** or select an image from your gallery.';
        const placeholderText = 'Tap to Scan Barcode or Upload Photo';

        // This input accepts both file selection and triggers camera capture on mobile devices
        const inputAccept = 'image/*;capture=camera'; 
        const inputID = 'mergedInput';

        // Custom Capture Button component to replace the standard file input
        const CaptureButton = (
            <button 
                onClick={() => ocrInputRef.current?.click()}
                style={{ backgroundColor: coralColors.light, color: coralColors.DEFAULT, borderColor: coralColors.DEFAULT }}
                className={`w-full font-bold py-4 px-4 rounded-xl text-lg border-2 border-dashed transition duration-150 mb-4 hover:bg-white hover:shadow-lg`}
            >
                <i className="fas fa-camera mr-2"></i> {placeholderText}
            </button>
        );

        return (
            // Note: This component acts as the visual replacement for the "Cable BATCH NUMBER" input field
            <div className="card bg-white rounded-xl p-6 transition-all duration-300 shadow-md mb-6 border border-gray-200">
                 <label className="block text-xs font-semibold uppercase mb-1" style={{ color: coralColors.dark }}>
                    {fieldNumber}. {title}
                </label>
                <p className="text-xs text-gray-600 mb-4">{description}</p>

                {/* --- Primary Capture/Scan Interface --- */}

                {/* Hidden File Input for Triggering Camera/Gallery */}
                <input 
                    type="file" 
                    ref={ocrInputRef} 
                    id={inputID} 
                    accept={inputAccept} 
                    className="hidden" 
                    onChange={handleOcrFileChange} 
                />
                
                {/* Manual Input Toggle: Show Capture button/interface only if not in manual mode */}
                {!isManualEntry && (
                    <>
                        {CaptureButton}
                        <button 
                            onClick={() => { setIsManualEntry(true); setOcrState(prev => ({...prev, file: null, result: null, error: null})) }} 
                            className="w-full mb-4 text-xs font-semibold text-gray-600 hover:text-gray-900 underline"
                        >
                            <i className="fas fa-keyboard mr-1"></i> Prefer Manual Entry?
                        </button>
                    </>
                )}


                {/* --- Manual Entry or AI Result Display --- */}
                
                {isManualEntry || ocrState.result || ocrState.error ? (
                    <div className="mb-6">
                         <h4 className="font-medium text-gray-700 mb-2">Physical ID Entry</h4>
                         <div className="relative">
                            <input 
                                type="text" 
                                placeholder="Enter Cable BATCH NUMBER manually" 
                                value={physicalIdValue}
                                onChange={(e) => setPhysicalIdValue(e.target.value)}
                                className="w-full p-3 pr-16 border border-gray-400 rounded-lg focus:ring-1 focus:ring-opacity-50 font-bold text-lg"
                                style={{ borderColor: coralColors.light, focusRingColor: coralColors.DEFAULT, borderWidth: '2px' }}
                            />
                            {/* Copy Button functionality */}
                            {physicalIdValue && (
                                <button 
                                    onClick={copyPhysicalId}
                                    style={{ color: coralColors.DEFAULT }}
                                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm font-semibold hover:text-gray-900 transition duration-150"
                                    title="Copy ID to clipboard"
                                >
                                    {copyStatus === 'Copied!' ? (
                                        <><i className="fas fa-check mr-1 text-green-500"></i> Copied!</>
                                    ) : (
                                        <><i className="fas fa-copy mr-1"></i> Copy</>
                                    )}
                                </button>
                            )}
                        </div>
                         {isManualEntry && !ocrState.loading && (
                            <button onClick={() => setIsManualEntry(false)} className="mt-2 text-xs font-semibold text-gray-600 hover:text-gray-900 underline">
                                <i className="fas fa-camera mr-1"></i> Switch back to Scan/Photo
                            </button>
                        )}
                    </div>
                ) : (
                    <div className="mb-6">
                        <h4 className="font-medium text-gray-700 mb-2">Physical ID Entry</h4>
                        <p className="text-gray-500 p-3 border border-gray-200 rounded-lg">Awaiting scan or manual entry...</p>
                    </div>
                )}
                
                {/* --- Capture Preview and Results --- */}

                <div className="flex flex-col md:flex-row gap-6 mb-6">
                    <div className="w-full md:w-1/2">
                        <h4 className="font-medium text-gray-700 mb-2">Capture Preview</h4>
                        <div className="rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center min-h-[150px]" style={{ border: `1px solid ${coralColors.light}` }}>
                            {ocrState.file ? (
                                <img id="imagePreview" src={ocrState.preview} 
                                    className="w-full h-auto object-contain" alt="Captured or Uploaded Image Preview" 
                                    onError={(e) => { e.target.onerror = null; e.target.src = 'https://placehold.co/400x300/f3f4f6/333333?text=Error+Loading+Image'; }} 
                                />
                            ) : (
                                <p className="text-gray-500 font-medium">No Image Selected</p>
                            )}
                        </div>
                    </div>

                    <div className="w-full md:w-1/2">
                        <h4 className="font-medium text-gray-700 mb-2 mt-4 md:mt-0">Extraction Status</h4>
                        <div id="ocrResultDisplay" className="bg-gray-50 p-4 rounded-lg h-full min-h-[150px] flex flex-col justify-center items-center text-center">
                            {OcrResultDisplay}
                        </div>
                    </div>
                </div>

                <button onClick={processReelImage} disabled={ocrState.loading || isManualEntry || !ocrState.file} 
                        style={{ backgroundColor: coralColors.DEFAULT }}
                        className="w-full text-white font-bold py-3 px-4 rounded-xl text-lg transition duration-150 disabled:opacity-50 hover:bg-[#D45A4A]">
                    {ocrState.loading ? (
                        <span className="flex items-center justify-center">
                            <span className="spinner inline-block w-4 h-4 border-2 border-gray-200 border-solid rounded-full animate-spin mr-2" style={{ borderTopColor: 'white' }}></span> Analyzing Barcode...
                        </span>
                    ) : (
                        <span><i className="fas fa-magic mr-2"></i> Analyze Captured Image</span>
                    )}
                </button>
                {ocrState.error && !isManualEntry && <p className="text-red-500 text-sm mt-2">AI failed. Check result status above.</p>}
            </div>
        );
    }

    // NEW Component for mobile file upload/dropzone (Field 23)
    const renderMobileFileUploadField = (fieldNumber) => {
        const title = 'Drag file here or [SEARCH FILE]'; 

        return (
            <div className="mb-6">
                <label className="block text-xs font-semibold uppercase mb-1" style={{ color: coralColors.dark }}>
                    {fieldNumber}. {title}
                </label>
                
                {/* File Upload/Drag & Drop Area */}
                <div 
                    ref={formFileDropzoneRef}
                    onDrop={handleFormDrop}
                    onDragOver={handleFormDragOver}
                    onDragLeave={handleFormDragLeave}
                    onClick={() => formFileInputRef.current.click()}
                    style={{ ...formFileState.dropzoneStyle, transition: 'all 0.2s', borderColor: formFileState.dropzoneStyle.borderColor }}
                    className="border-2 border-dashed rounded-xl p-6 text-center cursor-pointer"
                >
                    <input 
                        type="file" 
                        ref={formFileInputRef} 
                        className="hidden" 
                        onChange={(e) => handleFormFileSelected(e.target.files[0])}
                    />
                    <i className="fas fa-cloud-upload-alt text-3xl mb-2" style={{ color: coralColors.DEFAULT }}></i>
                    <p className="font-semibold text-gray-700 text-sm">Tap or Drag File Here</p>
                    <p className="text-xs text-gray-500 mt-1">
                        Attached File: <span className="font-medium text-gray-900">{formFileState.fileName}</span>
                    </p>
                </div>
                {/* Note: In a real app, this file would be attached to the form submission */}
            </div>
        );
    };


    // Function to map and render all task fields
    const renderTaskForm = () => {
        // Define all form fields based on the latest table provided
        const allFields = [
            // Always Visible Fields
            { label: 'WORK ACTIVITY', type: 'dropdown', options: ['AERIAL Cable Installation', 'UNDERGROUND Cable Installation', 'Other'], isAlwaysVisible: true, isWorkActivity: true },
            { label: 'CONSTRUCTION NOTES', type: 'text', isAlwaysVisible: true },

            // Dynamically Visible Fields (Show when WORK ACTIVITY is selected)
            { label: 'Size', type: 'text' },
            { label: 'CABLE SIZE', type: 'dropdown', options: ['12F', '24F', '48F', '96F'] },
            { label: 'MATERIALS', type: 'header' },
            { label: 'CABLE BATCH NUMBER', type: 'ai-scan' }, // Special AI component (Field 4)
            { label: 'START Footage Mark', type: 'text' },
            { label: 'END Footage Mark', type: 'text' },
            { label: 'LENGTH OF AERIAL Cable Placed (ft)', type: 'text' },
            { label: 'SINGLE DEAD ENDS Installed', type: 'text' },
            { label: 'DOUBLE DEAD ENDS Installed', type: 'text' },
            { label: 'SINGLE TANGENTS Installed', type: 'text' },
            { label: 'DOUBLE TANGENTS Installed', type: 'text' },
            { label: 'EXTENSION ARMS Installed', type: 'text' },
            { label: 'VIBRATION DAMPERS Installed', type: 'dropdown', options: ['Yes', 'No'] },
            { label: 'Installed Transition', type: 'dropdown', options: ['Yes', 'No'] },
            { label: 'SLACKLOOPS INSTALLED (MID ROUTE)', type: 'dropdown', options: ['0', '1', '2', '3'] },
            { label: 'Number of Snow Shoe Pairs Installed', type: 'dropdown', options: ['0', '1', '2'] },
            { label: 'End of Run (Cable Cut)', type: 'dropdown', options: ['Yes', 'No'] },
            { label: 'COMPLETION', type: 'header' },
            { label: 'Labels Installed', type: 'dropdown', options: ['Yes', 'No'] },
            { label: 'Road Crossings', type: 'dropdown', options: ['Yes', 'No'] },
            { label: 'Is this haul on a State Highway?', type: 'dropdown', options: ['Yes', 'No'] },
            { label: 'Is REARRANGEMENT Required', type: 'dropdown', options: ['Yes', 'No'] },
            
            // Always Visible Fields (Photos section)
            { label: 'Photos', type: 'header', isAlwaysVisible: true },
            { label: 'Other', type: 'dropdown', options: ['Yes', 'No'], isAlwaysVisible: true },
            { label: 'Drag file here or [SEARCH FILE]', type: 'file-upload', isAlwaysVisible: true }, // Field 23: File Upload Component
        ];

        let currentFieldNumber = 1;

        return (
            <div className="max-w-md mx-auto p-4 md:p-6 bg-white rounded-xl shadow-2xl">
                <h2 className="text-xl font-extrabold mb-6 text-center" style={{ color: coralColors.DEFAULT }}>
                    Mobile Field Task Simulation
                </h2>
                
                {allFields.map((field, index) => {
                    const isAlwaysVisible = field.isAlwaysVisible;
                    // Dynamic visibility: show if always visible OR if work activity is selected
                    const isVisible = isAlwaysVisible || (selectedWorkActivity); 

                    if (!isVisible) return null;
                    
                    if (field.type === 'header') {
                        // Headers are unnumbered and separate visual sections
                        return <FormHeader key={index} label={field.label} />;
                    }

                    // Handle WORK ACTIVITY field specially (always visible, handles dynamic visibility logic)
                    if (field.isWorkActivity) {
                        const fieldNum = currentFieldNumber++;
                        return (
                             <TaskField 
                                key={index}
                                label={field.label} 
                                type={field.type} 
                                options={field.options} 
                                fieldNumber={fieldNum}
                                value={selectedWorkActivity}
                                onChange={(e) => setSelectedWorkActivity(e.target.value)}
                            />
                        );
                    }
                    
                    if (field.type === 'ai-scan') {
                        // This is the AI automation field, passing the current number
                        const fieldNum = currentFieldNumber++;
                        return <div key={index}>{renderCableBatchNumberField(fieldNum)}</div>;
                    }
                    
                    if (field.type === 'file-upload') {
                         // This is the file Upload field
                        const fieldNum = currentFieldNumber++;
                        return <div key={index}>{renderMobileFileUploadField(fieldNum)}</div>;
                    }

                    // Render standard field and increment the counter. 
                    // These fields do NOT need value/onChange as they are just placeholders.
                    return (
                        <TaskField 
                            key={index}
                            label={field.label} 
                            type={field.type} 
                            options={field.options} 
                            fieldNumber={currentFieldNumber++}
                        />
                    );
                })}

                <button 
                    style={{ backgroundColor: coralColors.DEFAULT }}
                    className="w-full text-white font-bold py-3 px-4 rounded-xl text-lg mt-6 transition duration-150 hover:bg-[#D45A4A]"
                >
                    Save Changes
                </button>
            </div>
        );
    }
    
    const renderFunction2 = () => (
        <div className="max-w-4xl mx-auto">
            <h2 className="text-2xl font-bold mb-4" style={{ color: coralColors.DEFAULT }}>Function 2: Invoice Data Parsing (Web App)</h2>
            <div className="bg-white p-6 rounded-xl shadow-lg">
                <h3 className="text-xl font-semibold mb-4 text-gray-800">1. Upload Invoice File (CSV or PDF)</h3>
                
                {/* File Upload/Drag & Drop Area */}
                <div 
                    ref={dropzoneRef}
                    onDrop={handleDrop}
                    onDragOver={handleDragOver}
                    onDragLeave={handleDragLeave}
                    onClick={() => csvInputRef.current.click()}
                    style={{ borderColor: coralColors.light, transition: 'all 0.2s', backgroundColor: 'white' }}
                    className="border-2 border-dashed rounded-xl p-8 text-center cursor-pointer mb-6"
                >
                    <input 
                        type="file" 
                        ref={csvInputRef} 
                        accept=".csv, .pdf" 
                        className="hidden" 
                        onChange={(e) => handleInvoiceFileSelected(e.target.files[0])}
                    />
                    <i className="fas fa-file-invoice text-4xl mb-3" style={{ color: coralColors.DEFAULT }}></i>
                    <p className="font-semibold text-gray-700">Drag & Drop CSV or PDF Invoice here, or click to browse</p>
                    <p className="text-sm text-gray-500 mt-1">
                        Current File: <span className="font-medium text-gray-900">{invoiceState.fileName}</span>
                    </p>
                </div>
                
                {invoiceState.error && <p className="text-red-500 text-sm mb-4">{invoiceState.error}</p>}
                
                <button onClick={processInvoiceFile} disabled={invoiceState.loading || !invoiceState.file} 
                        style={{ backgroundColor: coralColors.DEFAULT }}
                        className="w-full text-white font-bold py-3 px-4 rounded-xl text-lg transition duration-150 disabled:opacity-50 hover:bg-[#D45A4A]">
                    {invoiceState.loading ? (
                        <span className="flex items-center justify-center">
                            <span className="spinner inline-block w-4 h-4 border-2 border-gray-200 border-solid rounded-full animate-spin mr-2" style={{ borderTopColor: 'white' }}></span> Parsing Data...
                        </span>
                    ) : (
                        <span><i className="fas fa-search-dollar mr-2"></i> Add Material</span>
                    )}
                </button>
                
                {/* Extracted Results Table */}
                {invoiceState.items.length > 0 && (
                    <div className="mt-8">
                        <h3 className="text-xl font-semibold mb-4 text-gray-800">2. Extracted Line Items</h3>
                        <div className="overflow-x-auto bg-gray-50 rounded-lg border border-gray-200">
                            <table className="min-w-full divide-y divide-gray-200">
                                <thead className="bg-gray-100">
                                    <tr>
                                        {['Physical ID', 'Type', 'Quantity', 'Status', 'Retire'].map(header => (
                                            <th key={header} className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                {header}
                                            </th>
                                        ))}
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-gray-200">
                                    {invoiceState.items.map((item, index) => (
                                        <tr key={index} className="hover:bg-gray-50">
                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{item.physicalId || 'N/A'}</td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.type || 'N/A'}</td>
                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.quantity || 'N/A'}</td>
                                            <td className="px-6 py-4 whitespace-nowrap">
                                                <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                                                    item.status?.toLowerCase() === 'live' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                                                }`}>
                                                    {item.status || 'N/A'}
                                                </span>
                                            </td>
                                            <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                                                <button className="text-red-500 hover:text-red-700 disabled:opacity-50" title="Retire Asset">
                                                    <i className="fas fa-minus-circle"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );


    return (
        <>
            <script src="https://kit.fontawesome.com/a7c3664d42.js" crossOrigin="anonymous"></script>
            <style>
                {`
                    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
                    body { font-family: 'Inter', sans-serif; background-color: #f7f9fb; }
                    .card { box-shadow: none; } /* Override default card shadow for clean mobile look */
                    /* Spinner for loading state */
                    .spinner {
                        border-top-color: currentColor;
                        border-right-color: transparent;
                    }
                `}
            </style>
            <div className="p-4 md:p-8">
                <div className="max-w-5xl mx-auto">
                    
                    {/* Main Application Header */}
                    <header className="py-4 px-6 mb-8 rounded-xl text-white" style={{ backgroundColor: coralColors.DEFAULT }}>
                        <h1 className="text-3xl font-extrabold">Fiber Asset Automation Engine</h1>
                        <p className="text-sm font-light opacity-80">Unified Proof of Concept for Field & Office Workflows</p>
                    </header>

                    {/* Tab Navigation - ORDER SWITCHED */}
                    <div className="flex mb-8 border-b border-gray-200">
                        {/* 1. Office Web App (Invoice Data) */}
                        <button 
                            onClick={() => setActiveTab('invoice')}
                            className={`py-3 px-6 text-sm font-semibold transition-colors duration-150 ${
                                activeTab === 'invoice' 
                                ? 'border-b-4 text-gray-900' 
                                : 'text-gray-500 hover:text-gray-700'
                            }`}
                            style={activeTab === 'invoice' ? { borderColor: coralColors.DEFAULT } : {}}
                        >
                            <i className="fas fa-laptop-code mr-2"></i> Office Web App (Invoice Data)
                        </button>
                        
                        {/* 2. Field App (Task Form) */}
                        <button 
                            onClick={() => setActiveTab('taskForm')}
                            className={`py-3 px-6 text-sm font-semibold transition-colors duration-150 ${
                                activeTab === 'taskForm' 
                                ? 'border-b-4 text-gray-900' 
                                : 'text-gray-500 hover:text-gray-700'
                            }`}
                            style={activeTab === 'taskForm' ? { borderColor: coralColors.DEFAULT } : {}}
                        >
                            <i className="fas fa-mobile-alt mr-2"></i> Field App (Task Form)
                        </button>
                    </div>

                    {/* Content Rendering - Order matched to tabs */}
                    {activeTab === 'invoice' && renderFunction2()}
                    {activeTab === 'taskForm' && renderTaskForm()}

                    <p className="text-center text-xs text-gray-400 mt-6">
                        Note: AI processing simulation is powered by Gemini.
                    </p>
                </div>
            </div>
        </>
    );
}