import React from "react";
import { Button, Card, Input, SectionTitle, SkeletonList, cn } from "../ui";
import { LuPencilLine } from "react-icons/lu";
import { maskEmail, maskPhone } from "../../utils/account";

export default function ProfileFormCard({
  loading,

  username,
  email,
  phone,
  fullName,
  nationalId,

  isEmailVerified,
  isPhoneVerified,

  canEditFullName,
  canEditNationalId,

  setFullName,
  setNationalId,

  onVerifyEmail,
  onVerifyPhone,

  showSaveButton,
  onSave,
  saveDisabled,
  saving,
  saveLeftMs,
}) {
  const alwaysRO = true;

  return (
    <Card className="sm:w-1/2 w-full">
      <SectionTitle>اطلاعات حساب</SectionTitle>

      {loading ? (
        <SkeletonList rows={5} />
      ) : (
        <div className="mt-5 grid gap-5">
          <Input label="نام کاربری" value={username} readOnly={alwaysRO} onChange={() => {}} />

          <div className="grid gap-2">
            <Input label="ایمیل" type="email" value={email} readOnly={alwaysRO} onChange={() => {}} />
            <div className="flex items-center justify-between text-xs">
              <span className="text-black/60 dark:text-white/70">
                وضعیت تایید:{" "}
                <b
                  className={
                    isEmailVerified
                      ? "text-emerald-600 dark:text-emerald-300"
                      : "text-red-600 dark:text-red-300"
                  }
                >
                  {isEmailVerified ? "تایید شده" : "تایید نشده"}
                </b>{" "}
                <span className="opacity-70">({maskEmail(email)})</span>
              </span>

              {!isEmailVerified && (
                <Button variant="primary" size="sm" onClick={onVerifyEmail}>
                  ارسال کد تایید
                </Button>
              )}
            </div>
          </div>

          <div className="grid gap-2">
            <Input label="شماره موبایل" value={phone} readOnly={alwaysRO} onChange={() => {}} />
            <div className="flex items-center justify-between text-xs">
              <span className="text-black/60 dark:text-white/70">
                وضعیت تایید:{" "}
                <b
                  className={
                    isPhoneVerified
                      ? "text-emerald-600 dark:text-emerald-300"
                      : "text-red-600 dark:text-red-300"
                  }
                >
                  {isPhoneVerified ? "تایید شده" : "تایید نشده"}
                </b>{" "}
                <span className="opacity-70">({maskPhone(phone)})</span>
              </span>

              {!isPhoneVerified && (
                <Button variant="primary" size="sm" onClick={onVerifyPhone}>
                  ارسال کد تایید
                </Button>
              )}
            </div>
          </div>

          <div className="grid gap-3">
            <div className="text-xs text-black/60 dark:text-white/70">اطلاعات هویتی</div>

            <Input
              label="نام و نام خانوادگی"
              value={fullName}
              readOnly={!canEditFullName}
              onChange={(e) => {
                if (!canEditFullName) return;
                setFullName(e.target.value);
              }}
            />

            <Input
              label="کد ملی"
              value={nationalId}
              readOnly={!canEditNationalId}
              maxLength={10}
              inputMode="numeric"
              onChange={(e) => {
                if (!canEditNationalId) return;
                setNationalId(e.target.value);
              }}
            />
          </div>

          {showSaveButton ? (
            <div className="flex items-center justify-end gap-3">
              <Button
                variant="outline"
                size="lg"
                className="sm:w-fit w-full dark:bg-[#001F3F] bg-[#f2f2f2] hover:bg-[#e2e2e2] dark:hover:bg-[#A1E3F919]"
                onClick={onSave}
                disabled={saveDisabled}
                title={
                  saveLeftMs > 0
                    ? `تا ${Math.ceil(saveLeftMs / 1000)} ثانیه دیگر`
                    : "ثبت اطلاعات هویتی"
                }
                leftIcon={
                  <LuPencilLine className={cn("w-4 h-4 text-[#43BEFF] dark:text-white", saving ? "animate-spin" : "")} />
                }
              >
                {saving ? "در حال ثبت..." : "ثبت اطلاعات هویتی"}
              </Button>
            </div>
          ) : null}
        </div>
      )}
    </Card>
  );
}
