/**
 * CaptureDetailsPanel — photo capture metadata, shown on the analysis screen
 * and inside reporting.
 *
 * One component serves both surfaces for the same reason the Swift app keeps
 * `CaptureFormatting` shared between its Scan Summary and its PDF report: two
 * renderers of the same facts drift, and a report that disagrees with the app
 * is worse than no report.
 *
 * Props:
 *   fields   (obj)  — ExifService fields object (required)
 *   variant  (str)  — 'analysis' (default) | 'details' | 'report'
 *   title    (str)  — optional heading override
 *
 * The variants exist only to match each host's spacing contract, which differs:
 * AnalysisPage nests panels in a `space-y-4` column that supplies no horizontal
 * padding, ScanDetails pads each section itself with `px-6 mb-6`, and report
 * surfaces are tighter. Getting this wrong doubles or drops the gutter.
 *
 * Empty-state design is deliberate rather than defensive. Most photos arriving
 * through a web upload carry no camera metadata: messaging apps and stock-photo
 * sites strip it on export, verified against real files where WhatsApp and
 * Unsplash images retained nothing but pixel dimensions. An empty panel reads as
 * a bug, so this explains what happened and how to avoid it instead.
 *
 * Written in ES5 for Babel 6 compatibility.
 */
var CaptureDetailsPanel = function (props) {
    var fields = props.fields || null;
    var variant = props.variant || 'analysis';

    var SECTION_CLASS = {
        analysis: '',              // parent supplies gap and gutter
        details:  'px-6 mb-6',     // ScanDetails pads per section
        report:   'mb-5',
    };
    var sectionClass = SECTION_CLASS[variant];
    if (sectionClass === undefined) sectionClass = SECTION_CLASS.analysis;

    if (!fields) return null;

    var CF = window.CaptureFormatting;
    var ES = window.ExifService;
    if (!CF || !ES) return null;

    var hasCamera = ES.hasCameraData(fields);
    var hasAny = ES.hasAnyData(fields);

    // Nothing at all — not even dimensions. Genuinely nothing worth a panel.
    if (!hasAny) return null;

    // Build only the rows that have a value, so the panel never shows "—".
    var rows = [];
    function push(label, value) {
        if (value === null || value === undefined || value === '') return;
        rows.push({ label: label, value: value });
    }

    push('Camera', CF.cameraLabel(fields.cameraModel, fields.lensModel));
    if (!fields.cameraModel && fields.cameraMake) push('Make', fields.cameraMake);
    push('Exposure', CF.exposureLabel(fields.iso, fields.exposureSeconds, fields.fNumber));
    push('Focal length', CF.focalLengthLabel(fields.focalLengthMM, fields.focalLength35mm));
    push('Flash', CF.flashLabel(fields.flashFired));
    push('Taken', CF.photoTimestampLabel(fields.photoTimestamp));

    var dims = CF.dimensionsLabel(fields.pixelWidth, fields.pixelHeight);
    var mp = CF.megapixelLabel(fields.pixelWidth, fields.pixelHeight);
    push('Resolution', dims ? (mp ? dims + '  ·  ' + mp : dims) : null);

    push('Coordinates', CF.coordinatesLabel(fields.gpsLatitude, fields.gpsLongitude));

    var heading = props.title || 'Photo Details';

    return (
        <section className={sectionClass}>
            <h3 className="text-[10px] font-black text-forest uppercase tracking-[0.15em] mb-3 px-1">
                {heading}
            </h3>

            <div className="bio-bg bio-bg-20 rounded-md border border-stone-100/50 overflow-hidden shadow-soft">
                {rows.map(function (row, i) {
                    var last = (i === rows.length - 1) && hasCamera;
                    return (
                        <div
                            key={row.label}
                            className={'grid grid-cols-[104px_1fr] p-4 items-center' + (last ? '' : ' border-b border-sage/10')}
                        >
                            <p className="text-[10px] font-black text-forest uppercase">{row.label}</p>
                            <p className="text-sm font-semibold text-forest leading-tight break-words">{row.value}</p>
                        </div>
                    );
                })}

                {!hasCamera && (
                    <div className="p-4 flex items-start gap-2.5">
                        <span className="material-symbols-outlined text-forest/40 text-lg mt-0.5" aria-hidden="true">
                            info
                        </span>
                        <div>
                            <p className="text-sm font-bold text-forest leading-snug">
                                No camera details in this photo
                            </p>
                            <p className="text-xs text-forest/70 font-medium leading-relaxed mt-1">
                                Messaging apps and social platforms remove camera information when a
                                photo is shared. To keep it, upload straight from your camera roll
                                or take the photo in the app.
                            </p>
                        </div>
                    </div>
                )}
            </div>

            {hasCamera && fields.gpsLatitude !== null && fields.gpsLatitude !== undefined && (
                <p className="text-[11px] text-forest/60 font-medium mt-2 px-1 leading-relaxed">
                    Location came from the photo itself, not from this device.
                </p>
            )}
        </section>
    );
};

window.CaptureDetailsPanel = CaptureDetailsPanel;