import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';

export const FuelLogsSection = () => {
  return (
    <section id="fuel-logs" className="py-8 border-b border-white/5 scroll-mt-24">
      <h2 className="text-2xl font-bold text-avus mb-4">4. Fuel Logs</h2>

      {/* Fuel Logs Overview */}
      <div id="fuel-logs-overview" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Fuel Logs Overview</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Click <strong className="text-avus">Fuel Logs</strong> in the sidebar to see the Fuel Logs page. At the top, you see summary statistics:
        </p>

        <GuideTable
          headers={['Metric', 'Description']}
          rows={[
            ['LOGS', 'Total number of fuel entries'],
            ['TOTAL FUEL', 'Total gallons (or liters) across all fill-ups'],
            ['TOTAL COST', 'Total amount spent on fuel'],
          ]}
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          Below the summary, a table lists all your fuel log entries. If you have no entries yet, you will see "No fuel logs yet."
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The <strong className="text-avus">+ Add Fuel Log</strong> button is in the top-right corner.
        </p>

        <GuideScreenshot
          src="/guide/fuel-logs-desktop.png"
          alt="Fuel Logs page showing summary statistics and fuel log entries table"
          caption="The Fuel Logs page displays summary statistics and all fuel entries"
        />
      </div>

      {/* Logging Fuel */}
      <div id="logging-fuel" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Logging Fuel</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Click <strong className="text-avus">+ Add Fuel Log</strong> (or the <strong className="text-avus">LOG FUEL</strong> button from the Dashboard) to open the "Log Fuel" modal. The modal title reads "Add Fuel Log" with a note showing your current unit system (e.g., "Displaying in Imperial (miles, gallons, MPG)").
        </p>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Receipt Scanning</h4>
        <p className="text-titanio/70 leading-relaxed mb-4">
          At the top of the form, click <strong className="text-avus">SCAN RECEIPT</strong> to use your camera to photograph a fuel receipt. The OCR system will automatically extract:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Fuel amount (gallons)</li>
          <li>Cost per gallon</li>
          <li>Total cost</li>
          <li>Date and time</li>
          <li>Fuel grade</li>
          <li>Station name</li>
        </ul>

        <p className="text-titanio/70 leading-relaxed mb-4">
          You can review and edit any extracted values before saving.
        </p>

        <h4 className="text-lg font-semibold text-avus mb-3 mt-6">Form Fields</h4>
        <GuideTable
          headers={['Field', 'Required', 'Description']}
          rows={[
            ['Select Vehicle', 'Yes', 'Choose which vehicle this fill-up is for'],
            ['Date & Time', 'Yes', 'Pre-filled with the current date and time; click the calendar icon to change'],
            ['MPG', 'Auto', 'Calculated automatically from distance and fuel amount'],
            ['Trip Distance / Odometer Reading', 'One required', 'Toggle between entering trip distance (miles driven since last fill) or odometer reading. Click the toggle button to switch modes.'],
            ['Fuel Type', 'Yes', 'Dropdown: Gasoline, Diesel, Electric, Hybrid, etc.'],
            ['Fuel Grade', 'Optional', 'Dropdown: 87 (Regular), 89 (Midgrade), 91 (Premium), 93 (Premium), etc.'],
            ['Fuel Amount', 'Yes', 'Number of gallons (or liters) purchased'],
            ['Cost Per Gallon', 'Yes', 'Price per gallon (or liter)'],
            ['Total Cost', 'Auto', 'Calculated from Fuel Amount x Cost Per Gallon. Displays "Enter fuel amount and cost per unit to see total cost." until both values are provided.'],
            ['Location', 'Optional', 'Type a station name to search and select'],
            ['Notes', 'Optional', 'Any additional notes about this fill-up'],
          ]}
        />

        <GuideScreenshot
          src="/guide/log-fuel-modal-desktop.png"
          alt="Log Fuel modal with form fields for fuel entry"
          caption="The Log Fuel modal with all fields for recording a fill-up"
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          Click <strong className="text-avus">Add Fuel Log</strong> to save the entry. The button is disabled until all required fields are completed.
        </p>
      </div>

      {/* Receipt Scanning */}
      <div id="receipt-scanning" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Receipt Scanning</h3>
        <div className="bg-primary-500/10 border border-primary-500/30 rounded-lg p-4 my-4">
          <p className="text-titanio/70 leading-relaxed">
            <strong className="text-avus">Pro Feature:</strong> Receipt scanning requires a Pro or Enterprise subscription. See <a href="#fuel-receipt-scanning" className="text-primary-400 hover:text-primary-300 underline">Fuel Receipt Scanning (Pro)</a> for full details on what is extracted and the review workflow.
          </p>
        </div>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The receipt scanning feature uses OCR technology:
        </p>

        <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Click <strong className="text-avus">SCAN RECEIPT</strong> at the top of the Log Fuel form</li>
          <li>Use your camera to photograph the receipt</li>
          <li>The system extracts fuel data with confidence indicators</li>
          <li>A review modal appears showing extracted values</li>
          <li>Edit any incorrect values inline</li>
          <li>Click <strong className="text-avus">Accept</strong> to auto-fill the form, or <strong className="text-avus">Reject</strong> to enter manually</li>
        </ol>

        <GuideScreenshot
          src="/guide/receipt-scan-mobile.png"
          alt="Mobile device showing receipt scanning with camera"
          caption="Receipt scanning uses your device camera to extract fuel data"
          mobile
        />
      </div>

      {/* Editing and Deleting Fuel Logs */}
      <div id="editing-and-deleting-fuel-logs" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Editing and Deleting Fuel Logs</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          From the fuel logs table, each entry has action buttons:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>
            <strong className="text-avus">Edit</strong> -- Opens the fuel log in edit mode to update any fields
          </li>
          <li>
            <strong className="text-avus">Delete</strong> -- Removes the fuel log entry (with confirmation)
          </li>
        </ul>
      </div>
    </section>
  );
};
