'use client';

import React from 'react';
import { CheckCircle2, ClipboardList, Plus, AlertTriangle, Hourglass } from 'lucide-react';
import { useTranslation } from 'react-i18next';

interface Props {
  gpsError?: boolean;
  /** Installation complète mais véhicule non rattaché au parc fleet. */
  pending?: boolean;
  licensePlate?: string;
  productLine?: string;
  imei?: string;
  installerName?: string;
  onViewHistory: () => void;
  onNewInstallation: () => void;
}

// Couleurs en inline-style pour ne pas dépendre de la purge Tailwind
// (classes calculées dynamiquement selon l'état GPS / rattachement parc).
const THEME = {
  success: {
    background: 'linear-gradient(160deg, #064E3B 0%, #059669 100%)',
    accent: '#D1FAE5', // emerald-100
    sub: '#A7F3D0', // emerald-200
    button: '#047857', // emerald-700
  },
  error: {
    background: 'linear-gradient(160deg, #7C2D12 0%, #D97706 100%)',
    accent: '#FEF3C7', // amber-100
    sub: '#FDE68A', // amber-200
    button: '#B45309', // amber-700
  },
  pending: {
    background: 'linear-gradient(160deg, #0C4A6E 0%, #0284C7 100%)',
    accent: '#E0F2FE', // sky-100
    sub: '#BAE6FD', // sky-200
    button: '#0369A1', // sky-700
  },
};

export function InstallationSuccessScreen({
  gpsError = false,
  pending = false,
  licensePlate,
  productLine,
  imei,
  installerName,
  onViewHistory,
  onNewInstallation,
}: Props) {
  const { t } = useTranslation();
  const theme = gpsError ? THEME.error : pending ? THEME.pending : THEME.success;

  return (
    <div
      className="fixed inset-0 z-50 flex flex-col items-center justify-center p-6 text-white overflow-y-auto"
      style={{ background: theme.background }}
    >
      <div className="text-center animate-slide-in w-full max-w-sm my-auto">
        <div className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-6 animate-check-pop">
          {gpsError ? (
            <AlertTriangle className="w-14 h-14 text-white" />
          ) : pending ? (
            <Hourglass className="w-14 h-14 text-white" />
          ) : (
            <CheckCircle2 className="w-14 h-14 text-white" />
          )}
        </div>
        <h1 className="text-2xl font-bold mb-3">
          {gpsError ? t('success.gpsErrorTitle') : pending ? t('success.pendingTitle') : t('success.title')}
        </h1>

        {gpsError && (
          <p className="text-sm mb-4" style={{ color: theme.accent }}>
            {t('success.gpsErrorMessage')}
          </p>
        )}

        {!gpsError && pending && (
          <p className="text-sm mb-4" style={{ color: theme.accent }}>
            {t('success.pendingMessage')}
          </p>
        )}

        {productLine && (
          <p className="mb-2" style={{ color: theme.accent }}>
            {t('summary.rowDevice')} <span className="font-mono font-bold">{productLine}</span>
          </p>
        )}
        {licensePlate && (
          <p className="mb-1" style={{ color: theme.accent }}>
            {t('success.vehicle')} : <span className="font-bold">{licensePlate}</span>
          </p>
        )}
        {imei && (
          <p className="text-sm mb-2" style={{ color: theme.sub }}>
            {t('validation.imei')} : <span className="font-mono">{imei}</span>
          </p>
        )}
        {installerName && (
          <p className="text-sm mb-2" style={{ color: theme.sub }}>
            {t('success.installer')} : <span className="font-semibold">{installerName}</span>
          </p>
        )}

        <div className="space-y-3 mt-8">
          <button
            type="button"
            onClick={onViewHistory}
            className="w-full px-8 py-4 bg-white font-bold rounded-xl shadow-lg active:scale-95 transition-transform flex items-center justify-center gap-2"
            style={{ color: theme.button }}
          >
            <ClipboardList className="w-5 h-5" />
            {t('success.viewHistory')}
          </button>
          <button
            type="button"
            onClick={onNewInstallation}
            className="w-full px-8 py-3.5 bg-white/15 text-white font-semibold rounded-xl active:scale-95 transition-transform flex items-center justify-center gap-2 border border-white/30"
          >
            <Plus className="w-4 h-4" />
            {t('history.newInstallation')}
          </button>
        </div>
      </div>
    </div>
  );
}