import React, { useMemo } from "react";
import { Button, Card, Divider, StepRow, Surface } from "../ui";

export default function SecurityStatusCard({
  me,
  loading,

  is2faEnabled,
  twoFAStatusChannel,

  onOpen2fa,
  onDisable2fa,

  twofaDisabled,
  twofaLeftMs,
}) {
  const steps = useMemo(() => {
    const isEmailVerified = !!me?.is_email_verified;
    const isPhoneVerified = !!me?.is_phone_verified;

    const hasIdentity = !!(
      me?.full_name &&
      String(me.full_name).trim() &&
      me?.national_id &&
      String(me.national_id).trim()
    );

    return [
      {
        ok: isEmailVerified,
        title: "تایید آدرس ایمیل",
        subtitle: me?.email || "",
      },
      {
        ok: isPhoneVerified,
        title: "تایید تلفن همراه",
        subtitle: me?.phone || "",
      },
      { ok: hasIdentity, title: "ثبت اطلاعات هویتی", subtitle: "نام و کدملی" },
      {
        ok: !!me?.two_factor_enabled,
        title: "فعالسازی ورود 2 مرحله‌ای",
        subtitle: me?.two_factor_enabled
          ? `فعال${me?.two_factor_channel ? ` (${me.two_factor_channel})` : ""}`
          : "غیرفعال",
      },
    ];
  }, [me]);

  return (
    <Card className="sm:w-1/2 w-full">
      <div className="flex items-center justify-center gap-3 pb-4">
        <p className="text-center text-sm font-bold text-black dark:text-white">
          وضعیت امنیت حساب
        </p>
      </div>

      {loading ? (
        <div className="space-y-3">
          {[1, 2, 3, 4].map((i) => (
            <div
              key={i}
              className="h-12 rounded-xl shadow bg-black/5 dark:bg-white/10 animate-pulse"
            />
          ))}
        </div>
      ) : (
        <>
          <Surface className="overflow-hidden">
            {steps.map((s, idx) => (
              <React.Fragment key={idx}>
                <StepRow
                  ok={s.ok}
                  title={s.title}
                  subtitle={s.subtitle}
                  action={
                    s.title.includes("2 مرحله") ? (
                      !is2faEnabled ? (
                        <Button
                          variant="primary"
                          size="sm"
                          onClick={onOpen2fa}
                          disabled={twofaDisabled}
                          title={
                            twofaLeftMs > 0
                              ? `تا ${Math.ceil(twofaLeftMs / 1000)} ثانیه دیگر`
                              : "فعالسازی"
                          }
                        >
                          فعالسازی
                        </Button>
                      ) : (
                        <Button
                          variant="dark"
                          size="sm"
                          onClick={onDisable2fa}
                          disabled={twofaDisabled}
                          title={
                            twofaLeftMs > 0
                              ? `تا ${Math.ceil(twofaLeftMs / 1000)} ثانیه دیگر`
                              : "غیرفعالسازی"
                          }
                        >
                          غیرفعالسازی
                        </Button>
                      )
                    ) : null
                  }
                />
                {idx !== steps.length - 1 ? <Divider /> : null}
              </React.Fragment>
            ))}
          </Surface>

          {!me ? (
            <div className="mt-4 text-[11px] text-red-600 dark:text-red-300">
              نتونستم اطلاعات حساب رو از <code>accounts/me/</code> بگیرم.
            </div>
          ) : null}

        </>
      )}
    </Card>
  );
}
