/* LoginCard.jsx — PW-001 Login Screen states */

const TOKENS = {
  primary: '#0D7A6E',
  primaryHover: '#E6F4F2',
  primaryPressed: '#085C53',
  gold: '#C9A84C',
  n900: '#111827',
  n700: '#374151',
  n500: '#6B7280',
  n300: '#D1D5DB',
  n100: '#F3F4F6',
  n000: '#FFFFFF',
  error: '#DC2626',
  errorBg: '#FEF2F2',
  warning: '#D97706',
  warningBg: '#FFFBEB',
};

const loginStyles = {
  frame: {
    width: 1280,
    height: 800,
    background: TOKENS.n100,
    position: 'relative',
    fontFamily: "'Inter', 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, sans-serif",
    color: TOKENS.n900,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  card: {
    width: 480,
    background: TOKENS.n000,
    borderRadius: 12,
    boxShadow: '0 4px 12px rgba(0,0,0,0.12)',
    padding: '48px 48px 40px',
    boxSizing: 'border-box',
  },
  logoRow: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginBottom: 36,
  },
  logoWrap: {
    display: 'flex',
    alignItems: 'center',
    gap: 10,
  },
  logoMark: {
    width: 32,
    height: 32,
    borderRadius: 8,
    background: TOKENS.primary,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: TOKENS.n000,
    fontWeight: 700,
    fontSize: 15,
    letterSpacing: 0.2,
  },
  logoText: {
    fontSize: 24,
    fontWeight: 700,
    color: TOKENS.n900,
    letterSpacing: -0.3,
  },
  subtitle: {
    marginTop: 10,
    fontSize: 13,
    fontWeight: 500,
    color: TOKENS.n500,
    letterSpacing: 0.4,
    textTransform: 'uppercase',
  },
  fieldGroup: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  field: {
    display: 'flex',
    flexDirection: 'column',
    gap: 6,
  },
  label: {
    fontSize: 12,
    fontWeight: 600,
    color: TOKENS.n700,
  },
  inputWrap: (opts = {}) => ({
    position: 'relative',
    height: 44,
    borderRadius: 8,
    border: `1px solid ${opts.error ? TOKENS.error : opts.focus ? TOKENS.primary : TOKENS.n300}`,
    background: TOKENS.n000,
    boxShadow: opts.focus
      ? `0 0 0 3px ${opts.error ? 'rgba(220,38,38,0.15)' : 'rgba(13,122,110,0.15)'}`
      : 'none',
    display: 'flex',
    alignItems: 'center',
    transition: 'all 120ms ease',
  }),
  input: {
    flex: 1,
    border: 'none',
    outline: 'none',
    background: 'transparent',
    fontSize: 14,
    color: TOKENS.n900,
    padding: '0 14px',
    height: '100%',
    fontFamily: 'inherit',
  },
  placeholder: {
    color: TOKENS.n500,
  },
  eyeBtn: {
    width: 44,
    height: 44,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: TOKENS.n500,
    cursor: 'pointer',
  },
  button: (enabled) => ({
    marginTop: 24,
    width: '100%',
    height: 48,
    borderRadius: 8,
    border: 'none',
    background: enabled ? TOKENS.primary : TOKENS.n300,
    color: enabled ? TOKENS.n000 : TOKENS.n500,
    fontSize: 15,
    fontWeight: 600,
    fontFamily: 'inherit',
    cursor: enabled ? 'pointer' : 'not-allowed',
    letterSpacing: 0.2,
  }),
  forgot: {
    marginTop: 16,
    fontSize: 13,
    fontWeight: 500,
    color: TOKENS.primary,
    cursor: 'pointer',
    display: 'inline-block',
  },
  banner: (kind) => ({
    display: 'flex',
    gap: 10,
    padding: '12px 14px',
    borderRadius: 8,
    background: kind === 'error' ? TOKENS.errorBg : TOKENS.warningBg,
    border: `1px solid ${kind === 'error' ? 'rgba(220,38,38,0.2)' : 'rgba(217,119,6,0.2)'}`,
    fontSize: 13,
    fontWeight: 500,
    color: kind === 'error' ? TOKENS.error : TOKENS.warning,
    lineHeight: 1.5,
    marginTop: 16,
    alignItems: 'flex-start',
  }),
  bannerIcon: {
    flexShrink: 0,
    marginTop: 1,
  },
  bannerCode: {
    fontSize: 11,
    fontWeight: 500,
    opacity: 0.75,
    marginLeft: 4,
    fontFamily: "'JetBrains Mono', 'SF Mono', Menlo, monospace",
  },
  footer: {
    position: 'absolute',
    bottom: 24,
    left: 0,
    right: 0,
    textAlign: 'center',
    fontSize: 12,
    fontWeight: 400,
    color: TOKENS.n500,
    letterSpacing: 0.2,
  },
  stateTag: {
    position: 'absolute',
    top: 20,
    left: 20,
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    padding: '6px 10px',
    background: TOKENS.n000,
    border: `1px solid ${TOKENS.n300}`,
    borderRadius: 999,
    fontSize: 11,
    fontWeight: 600,
    color: TOKENS.n700,
    letterSpacing: 0.3,
    textTransform: 'uppercase',
  },
  stateDot: {
    width: 6,
    height: 6,
    borderRadius: 999,
  },
};

/* -------- Icons -------- */
const IconEye = ({ off = false }) => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    {off ? (
      <>
        <path d="M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a20.43 20.43 0 0 1 5.06-5.94" />
        <path d="M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a20.37 20.37 0 0 1-3.17 4.19" />
        <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" />
        <line x1="1" y1="1" x2="23" y2="23" />
      </>
    ) : (
      <>
        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
        <circle cx="12" cy="12" r="3" />
      </>
    )}
  </svg>
);

const IconAlert = ({ color }) => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="8" x2="12" y2="12" />
    <line x1="12" y1="16" x2="12.01" y2="16" />
  </svg>
);

const IconLock = ({ color }) => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
  </svg>
);

/* -------- Building blocks -------- */

function Logo() {
  return (
    <div style={loginStyles.logoRow}>
      <div style={loginStyles.logoWrap}>
        <div style={loginStyles.logoMark}>K</div>
        <div style={loginStyles.logoText}>KARE</div>
      </div>
      <div style={loginStyles.subtitle}>Partner</div>
    </div>
  );
}

function EmailField({ value, error, focus }) {
  return (
    <div style={loginStyles.field}>
      <div style={loginStyles.label}>Email</div>
      <div style={loginStyles.inputWrap({ error, focus })}>
        <div
          dir="ltr"
          style={{
            ...loginStyles.input,
            display: 'flex',
            alignItems: 'center',
            color: value ? TOKENS.n900 : TOKENS.n500,
          }}
        >
          {value || 'partner@company.com'}
        </div>
      </div>
    </div>
  );
}

function PasswordField({ value, error, focus, reveal = false }) {
  const masked = reveal ? value : '•'.repeat(value ? value.length : 0);
  return (
    <div style={loginStyles.field}>
      <div style={loginStyles.label}>Password</div>
      <div style={loginStyles.inputWrap({ error, focus })}>
        <div
          style={{
            ...loginStyles.input,
            display: 'flex',
            alignItems: 'center',
            color: value ? TOKENS.n900 : TOKENS.n500,
            letterSpacing: value && !reveal ? 2 : 0,
          }}
        >
          {value ? masked : 'Enter password'}
        </div>
        <div style={loginStyles.eyeBtn}>
          <IconEye off={!reveal} />
        </div>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <div style={loginStyles.footer}>
      © KARE 2026 · Medical Tourism Platform
    </div>
  );
}

function StateTag({ label, color }) {
  return (
    <div style={loginStyles.stateTag}>
      <div style={{ ...loginStyles.stateDot, background: color }} />
      {label}
    </div>
  );
}

/* -------- 4 State Frames -------- */

function LoginDefault() {
  return (
    <div style={loginStyles.frame}>
      <StateTag label="01 · Default" color={TOKENS.n500} />
      <div style={loginStyles.card}>
        <Logo />
        <div style={loginStyles.fieldGroup}>
          <EmailField value="" />
          <PasswordField value="" />
        </div>
        <button style={loginStyles.button(false)} disabled>Login</button>
        <div style={{ marginTop: 16 }}>
          <span style={loginStyles.forgot}>Forgot password?</span>
        </div>
      </div>
      <Footer />
    </div>
  );
}

function LoginFilled() {
  return (
    <div style={loginStyles.frame}>
      <StateTag label="02 · Filled" color={TOKENS.primary} />
      <div style={loginStyles.card}>
        <Logo />
        <div style={loginStyles.fieldGroup}>
          <EmailField value="admin@seoulclinic.co.kr" />
          <PasswordField value="Pa$$w0rd!23" focus />
        </div>
        <button style={loginStyles.button(true)}>Login</button>
        <div style={{ marginTop: 16 }}>
          <span style={loginStyles.forgot}>Forgot password?</span>
        </div>
      </div>
      <Footer />
    </div>
  );
}

function LoginError() {
  return (
    <div style={loginStyles.frame}>
      <StateTag label="03 · Error" color={TOKENS.error} />
      <div style={loginStyles.card}>
        <Logo />
        <div style={loginStyles.fieldGroup}>
          <EmailField value="admin@seoulclinic.co.kr" error />
          <PasswordField value="wrongpass" error />
        </div>
        <div style={loginStyles.banner('error')}>
          <span style={loginStyles.bannerIcon}><IconAlert color={TOKENS.error} /></span>
          <span>
            이메일 또는 비밀번호가 올바르지 않습니다.
            <span style={loginStyles.bannerCode}>ERR-009</span>
          </span>
        </div>
        <button style={loginStyles.button(true)}>Login</button>
        <div style={{ marginTop: 16 }}>
          <span style={loginStyles.forgot}>Forgot password?</span>
        </div>
      </div>
      <Footer />
    </div>
  );
}

function LoginLocked() {
  return (
    <div style={loginStyles.frame}>
      <StateTag label="04 · Locked" color={TOKENS.warning} />
      <div style={loginStyles.card}>
        <Logo />
        <div style={loginStyles.fieldGroup}>
          <EmailField value="admin@seoulclinic.co.kr" />
          <PasswordField value="" />
        </div>
        <div style={loginStyles.banner('warning')}>
          <span style={loginStyles.bannerIcon}><IconLock color={TOKENS.warning} /></span>
          <span>
            계정이 잠겼습니다. 5회 이상 로그인 실패로 잠금 처리되었습니다. 1:1 문의로 문의해주세요.
          </span>
        </div>
        <button style={loginStyles.button(false)} disabled>Login</button>
        <div style={{ marginTop: 16 }}>
          <span style={loginStyles.forgot}>Forgot password?</span>
        </div>
      </div>
      <Footer />
    </div>
  );
}

Object.assign(window, {
  LoginDefault,
  LoginFilled,
  LoginError,
  LoginLocked,
});