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

export default function AccountChecklistCard({
  isEmailVerified,
  isPhoneVerified,
  hasIdentity,

  emailSubtitle,
  phoneSubtitle,

  onVerifyEmail,
  onVerifyPhone,

  showSaveHint,

  is2FAEnabled,
  twoFAChannel,

  userId,
}) {
  return (
    <Card className="sm:w-1/2 w-full">
      <p className="w-full pb-4 text-center text-sm font-bold text-black dark:text-white">
        حساب خود را تکمیل کنید
      </p>

      <Surface className="overflow-hidden">
        <StepRow
          ok={isEmailVerified}
          title="تایید آدرس ایمیل"
          subtitle={emailSubtitle}
          action={
            !isEmailVerified ? (
              <Button variant="primary" size="sm" onClick={onVerifyEmail}>
                ارسال کد
              </Button>
            ) : null
          }
        />
        <Divider />

        <StepRow
          ok={isPhoneVerified}
          title="تایید تلفن همراه"
          subtitle={phoneSubtitle}
          action={
            !isPhoneVerified ? (
              <Button variant="primary" size="sm" onClick={onVerifyPhone}>
                ارسال کد
              </Button>
            ) : null
          }
        />
        <Divider />

        <StepRow
          ok={hasIdentity}
          title="ثبت اطلاعات هویتی"
          subtitle="نام و کدملی"
          action={
            !hasIdentity && showSaveHint ? (
              <span className="text-[11px] text-black/50 dark:text-white/60">
                در فرم سمت چپ تکمیل کن
              </span>
            ) : null
          }
        />
        <Divider />

        <StepRow
          ok={is2FAEnabled}
          title="فعالسازی ورود 2 مرحله‌ای"
          subtitle={
            is2FAEnabled
              ? `فعال${twoFAChannel ? ` (${twoFAChannel})` : ""}`
              : "غیرفعال"
          }
        />
      </Surface>

      {userId ? (
        <div className="mt-4 hidden text-xs text-black/60 dark:text-white/70">
          شناسه کاربر: <b>{toFaDigits(userId)}</b>
        </div>
      ) : null}
    </Card>
  );
}
