'use client';

import React from 'react';
import { CheckCircle2, ShieldCheck, LogOut, Check } from 'lucide-react';

interface Props {
  puCode: string;
  onLogout: () => void;
}

export const Step7FinalSuccess: React.FC<Props> = ({ puCode, onLogout }) => {
  const formattedDate = new Date().toLocaleDateString('en-GB', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  });
  const formattedTime = new Date().toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
  });

  return (
    <div className="bg-white text-slate-900 border border-emerald-900/20 rounded-2xl p-6 shadow-xl font-sans text-center space-y-5">
      {/* Header Badge */}
      <div>
        <span className="text-[10px] font-bold text-emerald-800 bg-emerald-100 px-2 py-0.5 rounded-full uppercase tracking-wider">
          7. Last Page Submission (Completion)
        </span>
        <h2 className="text-xl font-black text-emerald-950 mt-1">
          Final Submission Success
        </h2>
      </div>

      {/* Checkmark Graphic */}
      <div className="flex justify-center my-4">
        <div className="w-20 h-20 rounded-full bg-emerald-50 border-4 border-[#065F46] flex items-center justify-center text-[#065F46] shadow-lg animate-in zoom-in-75">
          <Check className="w-12 h-12 stroke-[3]" />
        </div>
      </div>

      {/* Main Message */}
      <div className="space-y-2">
        <h3 className="text-base font-black text-slate-900 px-4">
          All PU {puCode.slice(-3)} data submitted to central server
        </h3>
        <p className="text-xs font-semibold text-slate-500 font-mono bg-slate-50 py-1.5 px-3 rounded-lg inline-block border border-slate-200">
          Submitted at {formattedTime}, {formattedDate}
        </p>
      </div>

      {/* Completion text */}
      <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4 text-xs font-semibold text-slate-700">
        You have completed the election day process. Log out
      </div>

      {/* Log Out Button */}
      <button
        type="button"
        onClick={onLogout}
        className="w-full py-3 px-4 rounded-xl bg-[#065F46] hover:bg-[#047857] text-white font-bold text-sm shadow-md transition active:scale-98 flex items-center justify-center gap-2"
      >
        <LogOut className="w-4 h-4" />
        <span>Log Out</span>
      </button>

      <p className="text-[11px] text-center text-slate-400 italic">
        7. Last Page Submission (Completion)
      </p>
    </div>
  );
};