'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { UserPlus, Shield, ArrowLeft, Check, Copy, KeyRound } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useCreateSystemUser } from '@/services/roles/queries';

const SYSTEM_ROLES = [
  { label: 'System Admin', value: 'ADMIN' },
  { label: 'Super Admin', value: 'SUPER_ADMIN' },
  { label: 'HR Department', value: 'HR' },
  { label: 'Business Development Manager (BDM)', value: 'BDM' },
  { label: 'KYC Verification Officer', value: 'KYC_OFFICER' },
  { label: 'Accounts & Finance', value: 'ACCOUNTS' },
  { label: 'Inventory Manager', value: 'INVENTORY_MANAGER' },
] as const;

export default function RoleUserPage() {
  const router = useRouter();
  const createUserMutation = useCreateSystemUser();

  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [role, setRole] = useState<string>('ADMIN');
  const [error, setError] = useState<string | null>(null);

  // Modal State for Displaying Credentials
  const [createdCredentials, setCreatedCredentials] = useState<{
    email: string;
    temporaryPassword: string;
  } | null>(null);
  const [copied, setCopied] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    if (!firstName.trim() || !lastName.trim() || !email.trim()) {
      setError('First name, last name, and corporate email are required.');
      return;
    }

    try {
      const payload = {
        newUser: {
          firstName: firstName.trim(),
          lastName: lastName.trim(),
          email: email.trim().toLowerCase(),
          phone: phone.trim() || null,
          role: role,
        },
      };

      const response: any = await createUserMutation.mutateAsync(payload);

      // Extract returned credentials from backend payload
      const creds = response?.data?.credentials || response?.credentials;
      if (creds) {
        setCreatedCredentials({
          email: email.trim().toLowerCase(),
          temporaryPassword: creds.temporaryPassword,
        });
      } else {
        router.push('/users-role');
      }
    } catch (err: any) {
      setError(
        err?.response?.data?.message || 'Failed to provision system user account.'
      );
    }
  };

  const copyToClipboard = () => {
    if (!createdCredentials) return;
    const text = `Email: ${createdCredentials.email}\nPassword: ${createdCredentials.temporaryPassword}`;
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <>
    <div className="max-w-7xl space-y-6 animate-in fade-in duration-200 select-none min-h-screen relative">
      {/* HEADER */}
      <div className="flex items-center gap-3 border-b border-border/10 pb-4">
        <Button
          variant="outline"
          size="icon"
          className="h-8 w-8 rounded-lg cursor-pointer"
          onClick={() => router.back()}
        >
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div>
          <h1 className="text-sm font-black tracking-widest text-foreground uppercase">
            Provision System User
          </h1>
          <p className="text-[11px] text-muted-foreground/70">
            Create account credentials and assign system access level.
          </p>
        </div>
      </div>

      {/* FORM */}
      <form onSubmit={handleSubmit} className="space-y-5">
        {error && (
          <div className="p-3 bg-destructive/10 border border-destructive/20 text-destructive text-xs rounded-lg font-medium">
            {error}
          </div>
        )}

        <div className="border border-border/40 rounded-xl bg-surface p-5 space-y-4 shadow-sm">
          <div className="flex items-center gap-2 border-b border-border/10 pb-3">
            <UserPlus className="h-4 w-4 text-primary" />
            <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">
              User Details & Role Access
            </h2>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1.5">
                First Name *
              </label>
              <input
                type="text"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                placeholder="John"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1.5">
                Last Name *
              </label>
              <input
                type="text"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                placeholder="Doe"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1.5">
                Email Address *
              </label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="user@enterprise.com"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
                required
              />
            </div>

            <div>
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1.5">
                Phone Number
              </label>
              <input
                type="text"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                placeholder="+91 XXXXX XXXXX"
                className="w-full text-xs font-medium px-3 py-2 border border-border/40 bg-background rounded-lg text-foreground focus:outline-none focus:border-primary"
              />
            </div>

            <div className="sm:col-span-2">
              <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1.5">
                Assigned Role *
              </label>
              <div className="relative">
                <select
                  value={role}
                  onChange={(e) => setRole(e.target.value)}
                  className="w-full text-xs font-semibold p-2.5 pl-9 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary cursor-pointer"
                  required
                >
                  {SYSTEM_ROLES.map((r) => (
                    <option key={r.value} value={r.value}>
                      {r.label}
                    </option>
                  ))}
                </select>
                <Shield className="absolute left-3 top-3 h-3.5 w-3.5 text-primary" />
              </div>
            </div>
          </div>
        </div>

        <div className="sticky bottom-0 w-full bg-surface border border-border/40 py-4 px-6 z-40 flex items-center justify-end gap-3 shadow-xl rounded-xl">
          <Button
            type="button"
            variant="ghost"
            onClick={() => router.back()}
            className="h-9 text-xs font-semibold cursor-pointer"
          >
            Discard Operations
          </Button>
          <Button
            type="submit"
            disabled={createUserMutation.isPending}
            className="h-9 rounded-lg px-4 text-xs font-semibold bg-primary text-primary-foreground gap-1.5 shadow-sm cursor-pointer"
          >
            <Check className="h-4 w-4 stroke-[2.5]" />
            <span>
              {createUserMutation.isPending
                ? 'Provisioning User...'
                : 'Deploy System User'}
            </span>
          </Button>
        </div>
      </form>

      
    </div>
    {/* CREDENTIAL DISPLAY MODAL */}
      {createdCredentials && (
        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-surface border border-border/40 rounded-xl p-6 max-w-md w-full shadow-2xl space-y-4 animate-in zoom-in-95">
            <div className="flex items-center gap-2 text-emerald-500 border-b border-border/10 pb-3">
              <KeyRound className="h-5 w-5" />
              <h3 className="text-sm font-bold uppercase tracking-wider text-foreground">
                Account Provisioned Successfully
              </h3>
            </div>

            <p className="text-xs text-muted-foreground">
              Since automated email dispatch is disabled, copy these login details and send them manually to the user:
            </p>

            <div className="space-y-2 bg-muted/20 p-3 rounded-lg border border-border/30 font-mono text-xs">
              <div>
                <span className="text-muted-foreground text-[10px] block uppercase">User Email:</span>
                <span className="text-foreground font-bold">{createdCredentials.email}</span>
              </div>
              <div className="pt-2 border-t border-border/10">
                <span className="text-muted-foreground text-[10px] block uppercase">Temporary Password:</span>
                <span className="text-primary font-bold text-sm">{createdCredentials.temporaryPassword}</span>
              </div>
            </div>

            <div className="flex items-center justify-end gap-2 pt-2">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={copyToClipboard}
                className="h-8 text-xs gap-1.5"
              >
                <Copy className="h-3.5 w-3.5" />
                <span>{copied ? 'Copied!' : 'Copy Credentials'}</span>
              </Button>
              <Button
                type="button"
                size="sm"
                onClick={() => router.push('/users-role')}
                className="h-8 text-xs"
              >
                Done
              </Button>
            </div>
          </div>
        </div>
      )}
      </>
  );
}