import { FormEventHandler, useEffect, useState } from "react";
import AuthLayout from "@/layouts/auth-layout";
import { Head, Link, useForm, router } from "@inertiajs/react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import InputError from "@/components/ui/input-error";
import { Checkbox } from "@/components/ui/checkbox";
import { useBrand } from "@/contexts/brand-context";
import {
    Users,
    Copy,
    ShieldCheck,
    Building2,
    User,
    Check,
    Scale,
    Landmark,
    Package,
    FileText,
    CalendarClock,
    TrendingUp,
    BarChart3,
    Eye,
    EyeOff,
    Mail,
    Lock,
    Briefcase,
    Gavel,
    BarChart2,
    LineChart,
    Calculator,
    BookOpen,
    Layers,
    FileSignature,
    Save,
    Target,
    DollarSign,
    UserCog
} from "lucide-react";

import { useTranslation } from 'react-i18next';
import { useFormFields } from '@/hooks/useFormFields';
import { usePageButtons } from '@/hooks/usePageButtons';

function LoginSideContent() {
    const { t } = useTranslation();
    const { settings } = useBrand();
    const companyName = settings?.titleText || 'ERPGo SaaS';

    return (
        <>
            <h2 className="text-4xl lg:text-[44px] [@media(max-width:1300px)]:text-[28px] [@media(max-height:850px)]:text-[24px] [@media(max-height:620px)]:text-[20px] font-bold text-[#1E293B] dark:text-white mb-6 [@media(max-height:850px)]:mb-2 [@media(max-height:620px)]:mb-1 leading-[1.2]">
                {t("Streamline Your Business Operations")}<br />
                {t("Smarter with")} <span className="text-primary">{companyName}</span>
            </h2>
            <p className="text-[#475569] dark:text-gray-300 text-lg [@media(max-height:850px)]:text-sm [@media(max-height:620px)]:text-xs mb-12 [@media(max-height:850px)]:mb-4 [@media(max-height:620px)]:hidden max-w-lg leading-relaxed [@media(max-width:1300px)]:text-sm [@media(max-height:850px)]:text-xs">
                {t("Manage HRM, Accounting, POS, Recruitment, Products, and Contracts - all in one powerful platform.")}
            </p>

            {/* Cards wrapper */}
            <div className="space-y-4 max-w-[100%] lg:max-w-[90%] mx-auto">
                {/* Huge Main Dashboard Card */}
                <div className="bg-white dark:bg-gray-900 rounded-xl shadow-[0_4px_20px_rgba(0,0,0,0.05)] border border-gray-100/50 dark:border-gray-700 p-4 sm:p-6 [@media(max-height:850px)]:p-2 [@media(max-height:620px)]:p-1">

                    <div className="flex items-center mb-5 [@media(max-height:850px)]:mb-2 [@media(max-height:620px)]:mb-1">
                        <div className="w-8 h-8 rounded-lg dark:bg-gray-800 flex items-center justify-center ltr:mr-3 rtl:ml-3 bg-primary/15">
                            <Building2 className="w-4 h-4 text-primary" />
                        </div>
                        <h3 className="font-bold text-gray-900 dark:text-white text-lg [@media(max-height:850px)]:text-sm [@media(max-height:620px)]:text-xs">{t("ERP Operations Overview")}</h3>
                    </div>

                    {/* Pipeline Steps Row */}
                    <div className="grid grid-cols-2 2xl:flex 2xl:flex-row items-stretch justify-between gap-2 sm:gap-4 mb-4 sm:mb-8 [@media(max-height:850px)]:mb-2 [@media(max-height:620px)]:mb-1">
                        {/* Step 1 */}
                        <div className="w-full xl:flex-1 min-w-0 flex flex-col justify-between border border-gray-100 dark:border-gray-700 rounded-lg p-4 sm:p-2 lg:p-3 shadow-sm bg-white dark:bg-gray-800 min-h-[96px] [@media(max-width:1300px)]:min-h-[64px] [@media(max-height:850px)]:min-h-0 h-auto [@media(max-height:850px)]:p-1 [@media(max-height:620px)]:p-0.5">
                            <div className="flex items-center mb-2 sm:mb-1">
                                <Users className="w-5 h-5 sm:w-4 sm:h-4 lg:w-5 lg:h-5 text-primary" />
                                <span className="text-[14px] sm:text-[10px] lg:text-[12px] font-bold text-gray-900 dark:text-white ltr:ml-2 ltr:sm:ml-1 rtl:mr-2 rtl:sm:mr-1 truncate line-clamp-1">{t("HRM")}</span>
                            </div>
                            <div>
                                <div className="text-2xl sm:text-xl lg:text-2xl [@media(max-height:850px)]:text-base [@media(max-height:620px)]:text-sm [@media(max-width:1300px)]:text-lg font-bold mb-2 text-primary">124</div>
                                <div className="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
                                    <div className="h-full w-full rounded-full bg-primary"></div>
                                </div>
                            </div>
                        </div>

                        {/* Step 2 */}
                        <div className="w-full xl:flex-1 min-w-0 flex flex-col justify-between border border-gray-100 dark:border-gray-700 rounded-lg p-4 sm:p-2 lg:p-3 shadow-sm bg-white dark:bg-gray-800 min-h-[96px] [@media(max-width:1300px)]:min-h-[64px] [@media(max-height:850px)]:min-h-0 h-auto [@media(max-height:850px)]:p-1 [@media(max-height:620px)]:p-0.5">
                            <div className="flex items-center mb-2 sm:mb-1">
                                <Calculator className="w-5 h-5 sm:w-4 sm:h-4 lg:w-5 lg:h-5 text-primary" />
                                <span className="text-[14px] sm:text-[10px] lg:text-[12px] font-bold text-gray-900 dark:text-white ltr:ml-2 ltr:sm:ml-1 rtl:mr-2 rtl:sm:mr-1 truncate line-clamp-1">{t("Accounting")}</span>
                            </div>
                            <div>
                                <div className="text-2xl sm:text-xl lg:text-2xl [@media(max-height:850px)]:text-base [@media(max-height:620px)]:text-sm [@media(max-width:1300px)]:text-lg font-bold mb-2 text-primary">842</div>
                                <div className="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
                                    <div className="h-full w-3/4 rounded-full bg-primary"></div>
                                </div>
                            </div>
                        </div>

                        {/* Step 3 */}
                        <div className="w-full xl:flex-1 min-w-0 flex flex-col justify-between border border-gray-100 dark:border-gray-700 rounded-lg p-4 sm:p-2 lg:p-3 shadow-sm bg-white dark:bg-gray-800 min-h-[96px] [@media(max-width:1300px)]:min-h-[64px] [@media(max-height:850px)]:min-h-0 h-auto [@media(max-height:850px)]:p-1 [@media(max-height:620px)]:p-0.5">
                            <div className="flex items-center mb-2 sm:mb-1">
                                <Package className="w-5 h-5 sm:w-4 sm:h-4 lg:w-5 lg:h-5 text-primary" />
                                <span className="text-[14px] sm:text-[10px] lg:text-[12px] font-bold text-gray-900 dark:text-white ltr:ml-2 ltr:sm:ml-1 rtl:mr-2 rtl:sm:mr-1 truncate line-clamp-1">{t("POS & Products")}</span>
                            </div>
                            <div>
                                <div className="text-2xl sm:text-xl lg:text-2xl [@media(max-height:850px)]:text-base [@media(max-height:620px)]:text-sm [@media(max-width:1300px)]:text-lg font-bold mb-2 text-primary">315</div>
                                <div className="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
                                    <div className="h-full w-1/2 rounded-full bg-primary"></div>
                                </div>
                            </div>
                        </div>

                        {/* Step 4 */}
                        <div className="w-full xl:flex-1 min-w-0 flex flex-col justify-between border border-gray-100 dark:border-gray-700 rounded-lg p-4 sm:p-2 lg:p-3 shadow-sm bg-white dark:bg-gray-800 min-h-[96px] [@media(max-width:1300px)]:min-h-[64px] [@media(max-height:850px)]:min-h-0 h-auto [@media(max-height:850px)]:p-1 [@media(max-height:620px)]:p-0.5">
                            <div className="flex items-center mb-2 sm:mb-1">
                                <Briefcase className="w-5 h-5 sm:w-4 sm:h-4 lg:w-5 lg:h-5 text-primary" />
                                <span className="text-[14px] sm:text-[10px] lg:text-[12px] font-bold text-gray-900 dark:text-white ltr:ml-2 ltr:sm:ml-1 rtl:mr-2 rtl:sm:mr-1 truncate line-clamp-1">{t("Recruitment")}</span>
                            </div>
                            <div>
                                <div className="text-2xl sm:text-xl lg:text-2xl [@media(max-height:850px)]:text-base [@media(max-height:620px)]:text-sm [@media(max-width:1300px)]:text-lg font-bold mb-2 text-primary">48</div>
                                <div className="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
                                    <div className="h-full w-1/4 rounded-full bg-primary"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Lower Stats Row inside the same Main Card */}
                    <div className="grid grid-cols-2 gap-2 sm:gap-4 mt-4 sm:mt-6 [@media(max-height:850px)]:mt-2 [@media(max-height:620px)]:mt-1">
                        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-[0_4px_12px_rgba(0,0,0,0.06)] border border-gray-200 dark:border-gray-700 p-2 sm:p-4 flex flex-row items-center sm:items-start text-left [@media(max-height:650px)]:p-1">
                            <div className="w-10 h-10 sm:w-14 sm:h-14 [@media(max-width:1300px)]:w-10 [@media(max-width:1300px)]:h-10 [@media(max-height:850px)]:w-8 [@media(max-height:850px)]:h-8 [@media(max-height:620px)]:w-6 [@media(max-height:620px)]:h-6 rounded-full dark:bg-gray-900 flex items-center justify-center ltr:mr-3 rtl:ml-3 sm:ltr:mr-4 sm:rtl:ml-4 flex-shrink-0 bg-primary/15">
                                <FileSignature className="w-5 h-5 sm:w-6 sm:h-6 feature-icon text-primary" />
                            </div>
                            <div>
                                <div className="text-[11px] sm:text-[13px] font-bold text-gray-900 dark:text-white mb-0.5 sm:mb-1 [@media(max-height:650px)]:text-[10px]">{t("Active Contracts")}</div>
                                <div className="text-xl sm:text-3xl [@media(max-height:850px)]:text-xl [@media(max-height:620px)]:text-base [@media(max-width:1300px)]:text-2xl font-bold text-gray-400 [@media(max-height:650px)]:text-sm">12 <span className="text-[10px] sm:text-sm font-normal">{t("this week")}</span></div>
                                <div className="text-[10px] sm:text-[12px] font-semibold mt-0.5 sm:mt-1 hidden sm:block text-primary">↑ 2 <span className="text-gray-400 font-normal">{t("newly added")}</span></div>
                            </div>
                        </div>

                        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-[0_4px_12px_rgba(0,0,0,0.06)] border border-gray-200 dark:border-gray-700 p-2 sm:p-4 flex flex-row items-center justify-between text-left overflow-hidden [@media(max-height:650px)]:p-1">
                            <div className="min-w-0">
                                <div className="text-[11px] sm:text-[13px] font-bold text-gray-900 dark:text-white mb-0.5 sm:mb-1 [@media(max-height:650px)]:text-[10px]">{t("Total Revenue")}</div>
                                <div className="text-xl sm:text-3xl [@media(max-height:850px)]:text-xl [@media(max-height:620px)]:text-base [@media(max-width:1300px)]:text-2xl font-bold [@media(max-height:650px)]:text-sm text-primary">$35,200</div>
                                <div className="text-[10px] sm:text-[13px] font-semibold mt-0.5 sm:mt-1 flex items-center justify-start hidden sm:flex text-primary">
                                    <TrendingUp className="w-3 h-3 sm:w-3.5 sm:h-3.5 ltr:mr-1 rtl:ml-1 text-primary" />
                                    12.5% <span className="text-gray-400 ltr:ml-1 rtl:mr-1 font-normal">{t("this month")}</span>
                                </div>
                            </div>
                            <div className="h-8 w-16 sm:h-12 sm:w-24 [@media(max-width:1300px)]:w-12 [@media(max-width:1300px)]:h-6 [@media(max-width:900px)]:hidden flex-shrink-0 ltr:ml-2 rtl:mr-2 flex items-center justify-center">
                                <LineChart className="w-full h-full text-primary" />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Feature Icons Row - Less top margin */}
                <div className="grid grid-cols-2 grid-cols-4 gap-4 mt-4 [@media(max-height:850px)]:mt-2 [@media(max-height:620px)]:mt-1 pt-2">
                    <div className="text-center">
                        <div className="w-12 h-12 mx-auto rounded-full flex items-center justify-center mb-3 bg-primary/15">
                            <Users className="w-5 h-5 text-primary" />
                        </div>
                        <div className="text-[12px] font-bold text-gray-900 dark:text-white mb-1">{t("HRM & Payroll")}</div>
                        <div className="text-[11px] text-gray-500 dark:text-gray-400 leading-relaxed px-1">{t("Manage employees, attendance & payroll seamlessly.")}</div>
                    </div>
                    <div className="text-center">
                        <div className="w-12 h-12 mx-auto rounded-full flex items-center justify-center mb-3 bg-primary/15">
                            <Calculator className="w-5 h-5 text-primary" />
                        </div>
                        <div className="text-[12px] font-bold text-gray-900 dark:text-white mb-1">{t("Account & Finance")}</div>
                        <div className="text-[11px] text-gray-500 dark:text-gray-400 leading-relaxed px-1">{t("Track double-entry bookkeeping & invoices.")}</div>
                    </div>
                    <div className="text-center">
                        <div className="w-12 h-12 mx-auto rounded-full flex items-center justify-center mb-3 bg-primary/15">
                            <Package className="w-5 h-5 text-primary" />
                        </div>
                        <div className="text-[12px] font-bold text-gray-900 dark:text-white mb-1">{t("POS & Stock")}</div>
                        <div className="text-[11px] text-gray-500 dark:text-gray-400 leading-relaxed px-1">{t("Organize products, stock & point of sale.")}</div>
                    </div>
                    <div className="text-center">
                        <div className="w-12 h-12 mx-auto rounded-full flex items-center justify-center mb-3 bg-primary/15">
                            <Briefcase className="w-5 h-5 text-primary" />
                        </div>
                        <div className="text-[12px] font-bold text-gray-900 dark:text-white mb-1">{t("Recruitment & Contracts")}</div>
                        <div className="text-[11px] text-gray-500 dark:text-gray-400 leading-relaxed px-1">{t("Streamline job postings, candidates & contracts.")}</div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default function Login({
    status,
    canResetPassword,
    enableRegistration,
    isDemo = false,
}: {
    status?: string;
    canResetPassword: boolean;
    enableRegistration?: boolean;
    isDemo?: boolean;
}) {
    const { t } = useTranslation();
    const [showPassword, setShowPassword] = useState(false);
    const [copiedEmail, setCopiedEmail] = useState<string | null>(null);

    const { data, setData, post, processing, errors, reset } = useForm({
        email: "",
        password: "",
        remember: false,
        recaptcha_token: null,
    });

    const formFields = useFormFields('getReCaptchFields', data, setData, errors, 'create', t);
    const loginButtons = usePageButtons('getLoginButtons', { t, isLoading: processing });

    useEffect(() => {
        // Set default credentials if in demo mode
        if (isDemo) {
            setData({
                email: 'company@example.com',
                password: '1234',
                remember: false,
                recaptcha_token: null,
            });
        }
    }, [isDemo]);

    useEffect(() => {
        return () => {
            reset("password");
        };
    }, []);

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route("login"), {
            onError: () => {
                if ((window as any).refreshRecaptchaV3) {
                    (window as any).refreshRecaptchaV3();
                }
            },
        });
    };

    const handleCopyCredentials = (email: string, password: string = '1234') => {
        setCopiedEmail(email);
        setTimeout(() => setCopiedEmail(null), 2000);
        setData((prevData) => ({
            ...prevData,
            email: email,
            password: password,
        }));
    };

    return (
        <AuthLayout
            title={t('Welcome back!')}
            description={t('Sign in to continue to your account')}
            sideContent={<LoginSideContent />}
        >
            <Head title={t('Log in')} />

            {status && (
                <div className="mb-4 text-center text-sm font-medium text-green-600">
                    {status}
                </div>
            )}

            <form className="space-y-3 sm:space-y-4 [@media(max-height:680px)]:space-y-2 [@media(max-height:620px)]:space-y-1" onSubmit={submit}>
                <div className="space-y-4 [@media(max-height:850px)]:space-y-2 [@media(max-height:620px)]:space-y-1">
                    <div className="relative">
                        <Label htmlFor="email" className="text-gray-700 dark:text-gray-300 font-medium mb-2 [@media(max-height:680px)]:mb-1 block" required>{t("Email address")}</Label>
                        <div className="relative">
                            <div className="absolute inset-y-0 ltr:left-0 rtl:right-0 ltr:pl-3 rtl:pr-3 flex items-center pointer-events-none">
                                <Mail className="h-5 w-5 text-gray-400" />
                            </div>
                            <Input
                                id="email"
                                type="email"
                                required
                                autoFocus
                                tabIndex={1}
                                autoComplete="email"
                                value={data.email}
                                onChange={(e) => setData('email', e.target.value)}
                                placeholder="company@example.com"
                                className="ltr:pl-10 rtl:pr-10 w-full border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 rounded-lg transition-all duration-200 text-gray-900 dark:text-white h-11 [@media(max-height:850px)]:h-8 [@media(max-height:620px)]:h-7 [@media(max-height:850px)]:text-xs [@media(max-height:620px)]:text-[10px] ring-primary"
                            />
                        </div>
                        <InputError message={errors.email} />
                    </div>

                    <div>
                        <div className="flex justify-between items-center mb-2">
                            <Label htmlFor="password" className="text-gray-700 dark:text-gray-300 font-medium" required>{t("Password")}</Label>
                            {canResetPassword && (
                                <Link
                                    href={route('password.request')}
                                    className="text-sm transition-colors duration-200 no-underline hover:underline hover:underline-primary text-primary"
                                    tabIndex={5}
                                >
                                    {t("Forgot password?")}
                                </Link>
                            )}
                        </div>
                        <div className="relative">
                            <div className="absolute inset-y-0 ltr:left-0 rtl:right-0 ltr:pl-3 rtl:pr-3 flex items-center pointer-events-none">
                                <Lock className="h-5 w-5 text-gray-400" />
                            </div>
                            <input
                                id="password"
                                type={showPassword ? "text" : "password"}
                                required
                                tabIndex={2}
                                autoComplete="current-password"
                                value={data.password}
                                onChange={(e) => setData('password', e.target.value)}
                                placeholder="••••••••••••"
                                className="border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-w-0 bg-transparent py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-primary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ltr:pl-10 rtl:pr-10 ltr:pr-10 rtl:pl-10 w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-800 rounded-lg text-gray-900 dark:text-white h-11 [@media(max-height:850px)]:h-8 [@media(max-height:620px)]:h-7 [@media(max-height:850px)]:text-xs [@media(max-height:620px)]:text-[10px] ring-primary"
                            />
                            <div className="absolute inset-y-0 ltr:right-0 rtl:left-0 ltr:pr-3 rtl:pl-3 flex items-center">
                                <button type="button" tabIndex={-1} onClick={() => setShowPassword(!showPassword)} className="text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer">
                                    {showPassword ? (
                                        <EyeOff className="h-4 w-4" />
                                    ) : (
                                        <Eye className="h-4 w-4" />
                                    )}
                                </button>
                            </div>
                        </div>
                        <InputError message={errors.password} />
                    </div>

                    <div className="flex items-center !mt-2.5 !mb-3 [@media(max-height:680px)]:!mt-1.5 [@media(max-height:680px)]:!mb-2 [@media(max-height:620px)]:!mt-1 [@media(max-height:620px)]:!mb-1">
                        <Checkbox
                            id="remember"
                            name="remember"
                            checked={data.remember}
                            onClick={() => setData('remember', !data.remember)}
                            tabIndex={3}
                            className="w-[14px] h-[14px] border border-gray-300 dark:border-gray-600 rounded"
                        />
                        <Label htmlFor="remember" className="ltr:ml-2 rtl:mr-2 text-sm text-gray-600 dark:text-gray-400">{t("Remember me")}</Label>
                    </div>
                    {formFields.map((field) => (
                        <div key={field.id}>
                            {field.component}
                        </div>
                    ))}
                </div>
                <Button
                    type="submit"
                    tabIndex={4}
                    disabled={processing}
                    className="w-full text-white py-2.5 [@media(max-height:850px)]:py-1.5 [@media(max-height:620px)]:py-1 [@media(max-height:850px)]:text-xs [@media(max-height:620px)]:text-[10px] text-sm font-medium tracking-wide transition-all duration-200 rounded-md shadow-md hover:shadow-lg transform hover:scale-[1.02]"
                >
                    {processing ? t('Loading...') : t('Login')}
                </Button>

                {loginButtons.length > 0 && (
                        <>
                            {/* Divider */}
                            <div className="my-5">
                                <div className="flex items-center">
                                    <div className="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
                                    <div className="w-2 h-2 rotate-45 mx-4 bg-primary"></div>
                                    <div className="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
                                </div>
                            </div>
                            
                            <div className="space-y-2">
                                <div className="relative">
                                    <div className="absolute inset-0 flex items-center">
                                        <span className="w-full border-t dark:border-gray-600" />
                                    </div>
                                    <div className="relative flex justify-center text-xs uppercase">
                                        <span className="bg-white dark:bg-slate-800 px-2 text-gray-500 dark:text-gray-400">{t('Or continue with')}</span>
                                    </div>
                                </div>
                                {loginButtons.map((button) => (
                                    <div key={button.id}>
                                        {button.component}
                                    </div>
                                ))}
                            </div>
                        </>
                    )}

                <div className="text-center">
                    {enableRegistration !== false && (
                        <p className="text-sm text-gray-500">{t("Don't have an account?")}{' '}
                            <Link
                                href={route('register')}
                                className="font-medium hover:underline text-primary"
                                tabIndex={6}
                            >
                                {t("Sign up")}
                            </Link>
                        </p>
                    )}
                </div>

                {isDemo && (
                    <>
                        <div className="mt-2 sm:mt-3 border-t border-gray-100/60 dark:border-gray-700 pt-2 sm:pt-3 [@media(max-height:680px)]:mt-1.5 [@media(max-height:680px)]:pt-1.5 [@media(max-height:620px)]:mt-1 [@media(max-height:620px)]:pt-1">
                            <div className="bg-white dark:bg-gray-800 rounded-xl p-2 sm:p-3 [@media(max-height:850px)]:p-1.5 [@media(max-height:620px)]:p-1 [@media(max-height:850px)]:mt-2 [@media(max-height:620px)]:mt-1 border border-gray-100 dark:border-gray-700 shadow-sm">
                                <div className="flex items-center mb-1.5 sm:mb-2">
                                    <div className="w-6 h-6 rounded-full flex items-center justify-center ltr:mr-2 rtl:ml-2 bg-primary/15">
                                        <Users className="w-3.5 h-3.5 text-primary" />
                                    </div>
                                    <h3 className="text-xs sm:text-sm font-semibold text-gray-900 dark:text-white">{t('Demo Login Credentials')}</h3>
                                </div>

                                <div className="w-full overflow-hidden rounded-lg border border-gray-100 dark:border-gray-700">
                                    <table className="w-full text-[11px] sm:text-xs ltr:text-start rtl:text-end table-fixed">
                                        <thead className="bg-primary/10">
                                            <tr className="text-gray-900 dark:text-gray-100 border-b border-gray-100 dark:border-gray-700">
                                                <th className="py-1.5 [@media(max-height:680px)]:py-0.5 ltr:pl-2 rtl:pr-2 font-semibold w-[35%]">{t("Role")}</th>
                                                <th className="py-1.5 [@media(max-height:680px)]:py-0.5 font-semibold w-[35%] truncate">{t("Email")}</th>
                                                <th className="py-2 [@media(max-height:680px)]:py-0.5 font-semibold w-[20%]">{t("Password")}</th>
                                                <th className="py-2 [@media(max-height:680px)]:py-0.5 ltr:pr-3 rtl:pl-3 w-[10%]"></th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-gray-100/80 dark:divide-gray-700">
                                            <tr>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pl-2 rtl:pr-2">
                                                    <div className="flex items-center">
                                                        <div className="hidden sm:flex w-5 h-5 [@media(max-height:680px)]:w-4 [@media(max-height:680px)]:h-4 rounded-full items-center justify-center ltr:mr-2 rtl:ml-2 flex-shrink-0 bg-primary/15">
                                                            <ShieldCheck className="w-3 h-3 [@media(max-height:680px)]:w-2.5 [@media(max-height:680px)]:h-2.5 text-primary" />
                                                        </div>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100 truncate">{t("Super Admin")}</span>
                                                    </div>
                                                </td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate ltr:pr-2 rtl:pl-2" title="superadmin@example.com">superadmin@example.com</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate font-mono text-sm [@media(max-height:680px)]:text-xs">1234</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pr-3 rtl:pl-3 ltr:text-end rtl:text-start">
                                                    <button type="button" onClick={() => handleCopyCredentials('superadmin@example.com')} className="inline-flex items-center justify-center rounded p-1.5 [@media(max-height:680px)]:p-1 transition-colors cursor-pointer hover:opacity-80 bg-primary/15">
                                                        <Copy className="w-3.5 h-3.5 [@media(max-height:680px)]:w-3 [@media(max-height:680px)]:h-3 text-primary" />
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pl-2 rtl:pr-2">
                                                    <div className="flex items-center">
                                                        <div className="hidden sm:flex w-5 h-5 [@media(max-height:680px)]:w-4 [@media(max-height:680px)]:h-4 rounded-full items-center justify-center ltr:mr-2 rtl:ml-2 flex-shrink-0 bg-primary/15">
                                                            <Building2 className="w-3 h-3 [@media(max-height:680px)]:w-2.5 [@media(max-height:680px)]:h-2.5 text-primary" />
                                                        </div>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100 truncate">{t("Company")}</span>
                                                    </div>
                                                </td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate ltr:pr-2 rtl:pl-2" title="company@example.com">company@example.com</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate font-mono text-sm [@media(max-height:680px)]:text-xs">1234</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pr-3 rtl:pl-3 ltr:text-end rtl:text-start">
                                                    <button type="button" onClick={() => handleCopyCredentials('company@example.com')} className="inline-flex items-center justify-center rounded p-1.5 [@media(max-height:680px)]:p-1 transition-colors cursor-pointer hover:opacity-80 bg-primary/15">
                                                        <Copy className="w-3.5 h-3.5 [@media(max-height:680px)]:w-3 [@media(max-height:680px)]:h-3 text-primary" />
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pl-2 rtl:pr-2">
                                                    <div className="flex items-center">
                                                        <div className="hidden sm:flex w-5 h-5 [@media(max-height:680px)]:w-4 [@media(max-height:680px)]:h-4 rounded-full items-center justify-center ltr:mr-2 rtl:ml-2 flex-shrink-0 bg-primary/15">
                                                            <UserCog className="w-3 h-3 [@media(max-height:680px)]:w-2.5 [@media(max-height:680px)]:h-2.5 text-primary" />
                                                        </div>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100 truncate">{t("Employee")}</span>
                                                    </div>
                                                </td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate ltr:pr-2 rtl:pl-2" title="john.smith@company.com">john.smith@company.com</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate font-mono text-sm [@media(max-height:680px)]:text-xs">1234</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pr-3 rtl:pl-3 ltr:text-end rtl:text-start">
                                                    <button type="button" onClick={() => handleCopyCredentials('john.smith@company.com')} className="inline-flex items-center justify-center rounded p-1.5 [@media(max-height:680px)]:p-1 transition-colors cursor-pointer hover:opacity-80 bg-primary/15">
                                                        <Copy className="w-3.5 h-3.5 [@media(max-height:680px)]:w-3 [@media(max-height:680px)]:h-3 text-primary" />
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pl-2 rtl:pr-2">
                                                    <div className="flex items-center">
                                                        <div className="hidden sm:flex w-5 h-5 [@media(max-height:680px)]:w-4 [@media(max-height:680px)]:h-4 rounded-full items-center justify-center ltr:mr-2 rtl:ml-2 flex-shrink-0 bg-primary/15">
                                                            <User className="w-3 h-3 [@media(max-height:680px)]:w-2.5 [@media(max-height:680px)]:h-2.5 text-primary" />
                                                        </div>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100 truncate">{t("Customer")}</span>
                                                    </div>
                                                </td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate ltr:pr-2 rtl:pl-2" title="sarah.johnson@client.com">sarah.johnson@client.com</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate font-mono text-sm [@media(max-height:680px)]:text-xs">1234</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pr-3 rtl:pl-3 ltr:text-end rtl:text-start">
                                                    <button type="button" onClick={() => handleCopyCredentials('sarah.johnson@client.com')} className="inline-flex items-center justify-center rounded p-1.5 [@media(max-height:680px)]:p-1 transition-colors cursor-pointer hover:opacity-80 bg-primary/15">
                                                        <Copy className="w-3.5 h-3.5 [@media(max-height:680px)]:w-3 [@media(max-height:680px)]:h-3 text-primary" />
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pl-2 rtl:pr-2">
                                                    <div className="flex items-center">
                                                        <div className="hidden sm:flex w-5 h-5 [@media(max-height:680px)]:w-4 [@media(max-height:680px)]:h-4 rounded-full items-center justify-center ltr:mr-2 rtl:ml-2 flex-shrink-0 bg-primary/15">
                                                            <Calculator className="w-3 h-3 [@media(max-height:680px)]:w-2.5 [@media(max-height:680px)]:h-2.5 text-primary" />
                                                        </div>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100 truncate">{t("Vendor")}</span>
                                                    </div>
                                                </td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate ltr:pr-2 rtl:pl-2" title="alex.vendor@supplier.com">alex.vendor@supplier.com</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 text-gray-600 dark:text-gray-300 truncate font-mono text-sm [@media(max-height:680px)]:text-xs">1234</td>
                                                <td className="py-1 [@media(max-height:680px)]:py-0 ltr:pr-3 rtl:pl-3 ltr:text-end rtl:text-start">
                                                    <button type="button" onClick={() => handleCopyCredentials('alex.vendor@supplier.com')} className="inline-flex items-center justify-center rounded p-1.5 [@media(max-height:680px)]:p-1 transition-colors cursor-pointer hover:opacity-80 bg-primary/15">
                                                        <Copy className="w-3.5 h-3.5 [@media(max-height:680px)]:w-3 [@media(max-height:680px)]:h-3 text-primary" />
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </form>
        </AuthLayout>
    );
}