/**
 * QRCalculatorLoader
 * Wrapper component that decodes QR data and renders TripCalculator with pre-filled values
 */

'use client';

import { motion } from 'framer-motion';
import { QrCode, Loader2, AlertTriangle } from 'lucide-react';
import { TripCalculator } from './TripCalculator';
import { useQRDecoder, useClearQRParam } from '../hooks/useQRDecoder';
import { getQRDataDescription } from '../utils/qrDataValidator';
import type { VesselData } from '../types';

interface Props {
  vesselData: VesselData;
  onOffsetClick?: (tons: number, monetaryAmount?: number) => void;
}

export function QRCalculatorLoader({ vesselData, onOffsetClick }: Props) {
  const { data, isLoading, error, hasQRData } = useQRDecoder();
  const clearQR = useClearQRParam();

  // Loading state
  if (isLoading) {
    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="luxury-card p-12 max-w-4xl w-full mt-8 flex flex-col items-center justify-center"
      >
        <Loader2 className="w-12 h-12 text-deep-sea-blue animate-spin mb-4" />
        <h2 className="text-2xl font-bold text-deep-sea-blue mb-2">Decoding QR Data...</h2>
        <p className="text-deep-sea-blue/70">Please wait while we prepare your calculator</p>
      </motion.div>
    );
  }

  // Error state
  if (error || (hasQRData && !data)) {
    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="luxury-card p-12 max-w-4xl w-full mt-8"
      >
        <div className="flex flex-col items-center text-center">
          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
            <AlertTriangle className="w-8 h-8 text-red-600" />
          </div>
          <h2 className="text-2xl font-bold text-deep-sea-blue mb-2">Invalid QR Code</h2>
          <p className="text-deep-sea-blue/70 mb-6 max-w-md">
            {error || 'The QR code data could not be decoded. Please try scanning again or enter your details manually.'}
          </p>
          <button
            onClick={() => {
              clearQR();
              window.location.reload();
            }}
            className="px-6 py-3 bg-deep-sea-blue text-white rounded-lg hover:bg-deep-sea-blue/90 transition-colors font-medium"
          >
            Enter Details Manually
          </button>
        </div>
      </motion.div>
    );
  }

  // No QR data - shouldn't normally reach here but handle gracefully
  if (!data) {
    return <TripCalculator vesselData={vesselData} onOffsetClick={onOffsetClick} />;
  }

  // Success - render calculator with QR data
  return (
    <div className="relative">
      {/* QR Badge - shows data was pre-filled */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        className="mb-4 flex items-center justify-center"
      >
        <div className="glass-effect px-4 py-2 rounded-full flex items-center space-x-2 border border-sea-green/30 bg-sea-green/10">
          <QrCode className="w-5 h-5 text-sea-green" />
          <span className="text-sm font-medium text-deep-sea-blue">
            Pre-filled from QR Code: {getQRDataDescription(data)}
          </span>
          <button
            onClick={clearQR}
            className="ml-2 text-deep-sea-blue/60 hover:text-deep-sea-blue transition-colors text-xs font-medium"
            title="Clear QR data"
          >
            ✕
          </button>
        </div>
      </motion.div>

      {/* Calculator with pre-filled data */}
      <TripCalculator
        vesselData={vesselData}
        onOffsetClick={onOffsetClick}
        initialData={data}
      />
    </div>
  );
}
