// src/app/dashboard/_components/OnboardingKycGate.tsx
'use client';

import React, { useState } from 'react';
import { 
  ShieldAlert, 
  Upload, 
  Clock, 
  CheckCircle2, 
  Sparkles, 
  ArrowRight, 
  FileText, 
  UserCheck 
} from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import UploadMyKycModal from '@/components/ui/UploadMyKycModal';
import { useMyKycRecord } from '@/services/kyc/queries';

export default function OnboardingKycGate({ user }: { user: any }) {
  const { data: personalKycRecord } = useMyKycRecord();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const status = personalKycRecord?.status || 'PENDING';
  const isUnderReview = status === 'UNDER_REVIEW';
  const isApproved = status === 'APPROVED';

  return (
    <div className="relative w-full flex items-center justify-center">
      <Card className="relative w-full max-w-xl border-border/40 bg-surface/90 backdrop-blur-xl shadow-xl rounded-2xl overflow-hidden">
        {/* Top Status Accent Bar */}
        <div className={`h-1.5 w-full ${
          isUnderReview 
            ? 'bg-gradient-to-r from-sky-500 via-indigo-500 to-sky-500 animate-pulse' 
            : isApproved 
            ? 'bg-emerald-500' 
            : 'bg-gradient-to-r from-amber-500 via-orange-500 to-amber-500'
        }`} />

        <CardContent className="p-4 sm:p-6 space-y-5 sm:space-y-6">
          {/* Header Section */}
          <div className="text-center space-y-2">
            <div className="relative inline-flex items-center justify-center">
              <div className={`p-2.5 sm:p-3 rounded-2xl border ${
                isUnderReview 
                  ? 'bg-sky-500/10 border-sky-500/20 text-sky-500' 
                  : 'bg-amber-500/10 border-amber-500/20 text-amber-500'
              }`}>
                {isUnderReview ? (
                  <Clock className="h-6 w-6 sm:h-7 sm:w-7 animate-spin-slow" />
                ) : (
                  <ShieldAlert className="h-6 w-6 sm:h-7 sm:w-7" />
                )}
              </div>
              <span className="absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-3.5 w-3.5 bg-amber-500"></span>
              </span>
            </div>

            <div className="space-y-1">
              <h1 className="text-base sm:text-lg font-bold tracking-tight text-foreground uppercase">
                Account Activation Required
              </h1>
              <p className="text-xs font-medium text-muted-foreground/80 max-w-md mx-auto leading-relaxed">
                Welcome, <span className="font-semibold text-foreground">{user?.name || user?.firstName}</span>. Complete your identity verification process to unlock access to your multi-sector dashboard.
              </p>
            </div>
          </div>

          {/* Stepper Status Indicators */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 p-1.5 bg-muted/30 rounded-xl border border-border/30">
            {/* Step 1 */}
            <div className="flex sm:flex-col items-center justify-between sm:justify-center gap-2 p-2 rounded-lg bg-background/60 shadow-xs">
              <div className="flex items-center gap-2 sm:gap-1 sm:flex-col">
                <FileText className="h-3.5 w-3.5 text-primary shrink-0" />
                <span className="text-[10px] font-bold uppercase text-muted-foreground">1. Details</span>
              </div>
              <span className="text-[9px] font-semibold text-emerald-500 flex items-center gap-0.5">
                <CheckCircle2 className="h-2.5 w-2.5" /> Done
              </span>
            </div>

            {/* Step 2 */}
            <div className={`flex sm:flex-col items-center justify-between sm:justify-center gap-2 p-2 rounded-lg transition-all ${
              status !== 'PENDING' ? 'bg-background/60 shadow-xs' : 'border border-amber-500/30 bg-amber-500/5'
            }`}>
              <div className="flex items-center gap-2 sm:gap-1 sm:flex-col">
                <Upload className={`h-3.5 w-3.5 shrink-0 ${status !== 'PENDING' ? 'text-primary' : 'text-amber-500'}`} />
                <span className="text-[10px] font-bold uppercase text-muted-foreground">2. KYC Upload</span>
              </div>
              <span className={`text-[9px] font-semibold ${status !== 'PENDING' ? 'text-emerald-500' : 'text-amber-500'}`}>
                {status !== 'PENDING' ? 'Submitted' : 'Action Required'}
              </span>
            </div>

            {/* Step 3 */}
            <div className={`flex sm:flex-col items-center justify-between sm:justify-center gap-2 p-2 rounded-lg ${
              isUnderReview ? 'border border-sky-500/30 bg-sky-500/5' : 'opacity-60'
            }`}>
              <div className="flex items-center gap-2 sm:gap-1 sm:flex-col">
                <UserCheck className={`h-3.5 w-3.5 shrink-0 ${isUnderReview ? 'text-sky-500' : 'text-muted-foreground'}`} />
                <span className="text-[10px] font-bold uppercase text-muted-foreground">3. Review</span>
              </div>
              <span className={`text-[9px] font-semibold ${isUnderReview ? 'text-sky-500' : 'text-muted-foreground'}`}>
                {isUnderReview ? 'In Progress' : 'Pending'}
              </span>
            </div>
          </div>

          {/* User Context Info Card */}
          <div className="divide-y divide-border/30 rounded-xl border border-border/40 bg-muted/10 text-xs">
            <div className="flex justify-between items-center p-2.5 gap-2">
              <span className="text-muted-foreground/70 font-medium shrink-0">Assigned Role</span>
              <span className="font-mono text-[10px] font-bold bg-primary/10 text-primary px-2 py-0.5 rounded-md border border-primary/20 uppercase truncate max-w-[200px]">
                {user?.role?.replace(/_/g, ' ')}
              </span>
            </div>
            <div className="flex justify-between items-center p-2.5 gap-2">
              <span className="text-muted-foreground/70 font-medium shrink-0">Compliance Status</span>
              <span className={`font-bold uppercase tracking-wider text-[10px] px-2 py-0.5 rounded-full flex items-center gap-1.5 shrink-0 ${
                isUnderReview 
                  ? 'bg-sky-500/10 text-sky-500 border border-sky-500/20' 
                  : 'bg-amber-500/10 text-amber-500 border border-amber-500/20'
              }`}>
                <span className={`h-1.5 w-1.5 rounded-full ${isUnderReview ? 'bg-sky-500' : 'bg-amber-500'}`} />
                {status?.replace(/_/g, ' ')}
              </span>
            </div>
          </div>

          {/* Action Trigger or Under Review Box */}
          {isUnderReview ? (
            <div className="rounded-xl border border-sky-500/20 bg-sky-500/5 p-3 text-center space-y-1">
              <div className="flex items-center justify-center gap-1.5 text-sky-500 font-bold text-xs uppercase tracking-wider">
                <Sparkles className="h-3.5 w-3.5 shrink-0" /> Documents Under Verification
              </div>
              <p className="text-[11px] text-muted-foreground leading-relaxed">
                Your submitted identity documents are being reviewed by our compliance officers. Your access will activate automatically upon approval.
              </p>
            </div>
          ) : (
            <Button 
              onClick={() => setIsModalOpen(true)}
              className="w-full h-10 bg-primary text-primary-foreground font-bold text-xs tracking-wider uppercase rounded-xl shadow-md hover:shadow-primary/20 hover:bg-primary/90 transition-all flex items-center justify-center gap-2 group active:scale-[0.98]"
            >
              <Upload className="h-3.5 w-3.5 transition-transform group-hover:-translate-y-0.5" />
              <span>Submit Verification Documents</span>
              <ArrowRight className="h-3.5 w-3.5 opacity-60 transition-transform group-hover:translate-x-1" />
            </Button>
          )}
        </CardContent>
      </Card>

      {/* Upload Modal */}
      {isModalOpen && <UploadMyKycModal onClose={() => setIsModalOpen(false)} />}

    </div>
  );
}