import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token, css }) => {
  return {
    // Base View Styles
    baseView: css`
      display: flex;
      flex-direction: column;
      gap: 32px;
    `,

    // Profile section with avatar
    profileSection: css`
      display: flex;
      align-items: flex-start;
      gap: 40px;

      @media screen and (max-width: ${token.screenMD}px) {
        flex-direction: column;
        align-items: center;
        gap: 24px;
      }
    `,

    avatarSection: css`
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    `,

    avatarWrapper: css`
      position: relative;
      cursor: pointer;
    `,

    avatar: css`
      border: 1px solid ${token.colorBorderSecondary};
      transition: all 0.3s ease;
    `,

    avatarOverlay: css`
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      color: #fff;
      font-size: 14px;
      gap: 4px;
    `,

    avatarIcon: css`
      font-size: 20px;
    `,

    avatarHint: css`
      font-size: 12px;
      color: ${token.colorTextDescription};
      text-align: center;
      max-width: 120px;
    `,

    formSection: css`
      flex: 1;
      max-width: 480px;

      @media screen and (max-width: ${token.screenMD}px) {
        max-width: 100%;
        width: 100%;
      }
    `,

    sectionTitle: css`
      font-size: 16px;
      font-weight: 600;
      color: ${token.colorTextHeading};
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid ${token.colorBorderSecondary};
      display: flex;
      align-items: center;
      gap: 8px;
    `,

    formGrid: css`
      display: flex;
      flex-direction: column;
      gap: 24px;
    `,

    fieldGroup: css`
      display: flex;
      flex-direction: column;
      gap: 8px;
    `,

    fieldLabel: css`
      font-size: 14px;
      color: ${token.colorTextSecondary};
    `,

    fieldValue: css`
      font-size: 14px;
      color: ${token.colorText};
      padding: 8px 12px;
      background: ${token.colorFillQuaternary};
      border-radius: ${token.borderRadius}px;
      border: 1px solid ${token.colorBorder};
    `,

    fieldHint: css`
      font-size: 12px;
      color: ${token.colorTextDescription};
      margin-top: 4px;
    `,

    submitButton: css`
      margin-top: 16px;
    `,

    // Security View Styles
    securityList: css`
      display: flex;
      flex-direction: column;
      gap: 16px;
    `,

    securityItem: css`
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid ${token.colorBorderSecondary};
      
      &:last-child {
        border-bottom: none;
      }
    `,

    securityIcon: css`
      font-size: 24px;
      margin-right: 16px;
      color: ${token.colorPrimary};
    `,

    securityIconPassword: css`
      color: ${token.colorTextSecondary};
    `,

    securityIconEmail: css`
      color: ${token.colorTextSecondary};
    `,

    securityContent: css`
      flex: 1;
      min-width: 0;
    `,

    securityTitle: css`
      font-size: 14px;
      font-weight: 500;
      color: ${token.colorText};
      margin-bottom: 4px;
    `,

    securityDesc: css`
      font-size: 13px;
      color: ${token.colorTextDescription};
    `,

    securityEmail: css`
      font-weight: 500;
      color: ${token.colorText};
    `,

    securityAction: css`
      flex-shrink: 0;
      margin-left: 16px;
    `,

    securityButton: css`
      padding: 0 16px;
    `,

    statusBadge: css`
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
    `,

    statusBound: css`
      color: ${token.colorSuccess};
      background: ${token.colorSuccessBg};
    `,

    statusUnbound: css`
      color: ${token.colorWarning};
      background: ${token.colorWarningBg};
    `,

    // Modal Styles
    modalContent: css`
      padding: 8px 0;
    `,

    modalSteps: css`
      margin-bottom: 24px;
    `,

    modalForm: css`
      .ant-form-item-label > label {
        color: ${token.colorTextSecondary};
      }
    `,

    modalTip: css`
      padding: 12px;
      background: ${token.colorInfoBg};
      border-radius: ${token.borderRadius}px;
      margin-bottom: 24px;
      font-size: 13px;
      color: ${token.colorText};
      border: 1px solid ${token.colorInfoBorder};
    `,

    modalSuccessTip: css`
      padding: 12px;
      background: ${token.colorSuccessBg};
      border-radius: ${token.borderRadius}px;
      margin-bottom: 24px;
      font-size: 13px;
      color: ${token.colorText};
      border: 1px solid ${token.colorSuccessBorder};
    `,

    codeInputRow: css`
      display: flex;
      gap: 8px;
    `,

    codeInput: css`
      flex: 1;
    `,

    codeButton: css`
      flex-shrink: 0;
    `,

    submitButtonModal: css`
      width: 100%;
      margin-top: 16px;
    `,

    currentEmailTag: css`
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      background: ${token.colorFillQuaternary};
      border-radius: ${token.borderRadius}px;
      font-size: 14px;
      color: ${token.colorText};
      margin-bottom: 24px;
    `,

    // Phone View Styles (legacy)
    area_code: css`
      width: 72px;
    `,

    phone_number: css`
      width: 214px;
    `,
  };
});

export default useStyles;
