/* eslint-disable @typescript-eslint/no-explicit-any */

import { useForm } from "@inertiajs/react"
import { useState } from "react"

import styles from "./web-settings.module.scss"

interface SettingsProps {
  settings: any
}

const WebsiteSettings = ({
  settings,
}: SettingsProps) => {
  const {
  data,
  setData,
  post,
  processing,
  errors,
} = useForm({
  /* ======================================
     BRANDING
  ====================================== */

  website_name:
    settings?.website_name || "",

  website_title:
    settings?.website_title || "",

  website_tagline:
    settings?.website_tagline || "",

  website_description:
    settings?.website_description || "",

  logo:
    null as File | null,

  favicon:
    null as File | null,

  hero_image:
    null as File | null,

  og_image:
    null as File | null,

  website_logo:
    settings?.website_logo || "",

  website_favicon:
    settings?.website_favicon || "",

  website_hero_image:
    settings?.website_hero_image || "",

  website_og_image:
    settings?.website_og_image || "",

  /* ======================================
     CONTACT INFORMATION
  ====================================== */

  office_address:
    settings?.office_address || "",

  // contact_email:
  //   settings?.contact_email || "",

  // support_email:
  //   settings?.support_email || "",

  website_email:
    settings?.website_email || "",

  contact_phone:
    settings?.contact_phone || "",

  whatsapp_number:
    settings?.whatsapp_number || "",

  telegram_support:
    settings?.telegram_support || "",

  live_chat_url:
    settings?.live_chat_url || "",

  google_map_embed:
    settings?.google_map_embed || "",

  // /* ======================================
  //    SOCIAL MEDIA
  // ====================================== */

  // facebook_url:
  //   settings?.facebook_url || "",

  // twitter_url:
  //   settings?.twitter_url || "",

  // instagram_url:
  //   settings?.instagram_url || "",

  // telegram_url:
  //   settings?.telegram_url || "",

  // youtube_url:
  //   settings?.youtube_url || "",

  // linkedin_url:
  //   settings?.linkedin_url || "",

  // tiktok_url:
  //   settings?.tiktok_url || "",

  // discord_url:
  //   settings?.discord_url || "",

  // reddit_url:
  //   settings?.reddit_url || "",

  /* ======================================
     SEO SETTINGS
  ====================================== */

  meta_title:
    settings?.meta_title || "",

  meta_description:
    settings?.meta_description || "",

  meta_keywords:
    settings?.meta_keywords || "",

  canonical_url:
    settings?.canonical_url || "",

  robots:
    settings?.robots || "index,follow",

  google_analytics_id:
    settings?.google_analytics_id || "",

  google_tag_manager_id:
    settings?.google_tag_manager_id || "",

  facebook_pixel_id:
    settings?.facebook_pixel_id || "",

  /* ======================================
     LEGAL SETTINGS
  ====================================== */

  // terms_url:
  //   settings?.terms_url || "",

  // privacy_url:
  //   settings?.privacy_url || "",

  // cookie_policy_url:
  //   settings?.cookie_policy_url || "",

  // risk_disclaimer:
  //   settings?.risk_disclaimer || "",

  // copyright_text:
  //   settings?.copyright_text || "",

  // company_registration_number:
  //   settings?.company_registration_number || "",

  // license_number:
  //   settings?.license_number || "",

  /* ======================================
     FINANCIAL SETTINGS
  ====================================== */

  base_currency:
    settings?.base_currency || "USD",

  currency_symbol:
    settings?.currency_symbol || "$",

  // minimum_deposit:
  //   settings?.minimum_deposit || "",

  // maximum_deposit:
  //   settings?.maximum_deposit || "",

  // minimum_withdrawal:
  //   settings?.minimum_withdrawal || "",

  // maximum_withdrawal:
  //   settings?.maximum_withdrawal || "",

  // withdrawal_fee:
  //   settings?.withdrawal_fee || "",

  // deposit_fee:
  //   settings?.deposit_fee || "",

  // referral_bonus:
  //   settings?.referral_bonus || "",

  // signup_bonus:
  //   settings?.signup_bonus || "",

  /* ======================================
     PLATFORM MESSAGES
  ====================================== */

  announcement:
    settings?.announcement || "",

  maintenance_message:
    settings?.maintenance_message || "",

  withdraw_disabled_message:
    settings?.withdraw_disabled_message || "",

  blocked_user_message:
    settings?.blocked_user_message || "",

  upgrade_required_message:
    settings?.upgrade_required_message || "",

  kyc_required_message:
    settings?.kyc_required_message || "",

  email_verification_message:
    settings?.email_verification_message || "",

  /* ======================================
     EMAIL SETTINGS
  ====================================== */

  mail_from_name:
    settings?.mail_from_name || "",

  mail_from_address:
    settings?.mail_from_address || "",

  reply_to_email:
    settings?.reply_to_email || "",

  /* ======================================
     AFFILIATE SETTINGS
  ====================================== */

  // affiliate_enabled:
  //   settings?.affiliate_enabled || false,

  // affiliate_commission:
  //   settings?.affiliate_commission || "",

  // affiliate_cookie_days:
  //   settings?.affiliate_cookie_days || "",

  /* ======================================
     SECURITY SETTINGS
  ====================================== */

  require_kyc_for_withdrawal:
    settings?.require_kyc_for_withdrawal || false,

  require_email_verification:
    settings?.require_email_verification || false,

  enable_two_factor:
    settings?.enable_two_factor || false,

  allow_registration:
    settings?.allow_registration || true,

  /* ======================================
     WEBSITE PREFERENCES
  ====================================== */

  enable_announcement:
    settings?.enable_announcement || false,

  enable_withdrawals:
    settings?.enable_withdrawals || true,

  enable_deposits:
    settings?.enable_deposits || true,

  enable_referrals:
    settings?.enable_referrals || true,

  enable_blog:
    settings?.enable_blog || true,

  enable_signals:
    settings?.enable_signals || true,

  enable_copy_trading:
    settings?.enable_copy_trading || true,

  maintenance_mode:
    settings?.maintenance_mode || false,

  /* ======================================
     FOOTER
  ====================================== */

  footer_about:
    settings?.footer_about || "",

  footer_copyright:
    settings?.footer_copyright || "",

  footer_disclaimer:
    settings?.footer_disclaimer || "",


  /* ======================================
     SECURITY SETTINGS
  ====================================== */

  enable_recaptcha:
    settings?.enable_recaptcha || false,

  recaptcha_site_key:
    settings?.recaptcha_site_key || "",

  recaptcha_secret_key:
  settings?.recaptcha_secret_key || "",
})

  const handleSubmit = (
    e: React.FormEvent<HTMLFormElement>
  ) => {
    e.preventDefault()

    post("/admin/settings/update")
  }

  const [
  logoPreview,
  setLogoPreview,
] = useState<string | null>(null)

const [
  faviconPreview,
  setFaviconPreview,
] = useState<string | null>(null)

// console.log("Settings details", settings)

  return (
    <div className={styles.web__settings}>

      <form onSubmit={handleSubmit}>
        {/* ======================================
            BRANDING SECTION
        ====================================== */}

        <div
          className={styles.sectionCard}
        >
          <div
            className={
              styles.sectionHeader
            }
          >
            <h3>
              Branding &
              Identity
            </h3>

            <p>
              Configure your
              platform name,
              logo and favicon.
            </p>
          </div>

          <div
            className={
              styles.web__settings__grid
            }
          >
            <div
              className={
                styles.formGroup
              }
            >
              <label>
                Website Name
              </label>

              <input
                type="text"
                value={
                  data.website_name
                }
                placeholder="TraderPlus"
                onChange={(e) =>
                  setData(
                    "website_name",
                    e.target.value
                  )
                }
              />

              {errors.website_name && (
                <span
                  className={
                    styles.error
                  }
                >
                  {
                    errors.website_name
                  }
                </span>
              )}
            </div>

            <div
              className={
                styles.formGroup
              }
            >
              <label>
                Website Title
              </label>

              <input
                type="text"
                value={
                  data.website_title
                }
                placeholder="Premium Trading Platform"
                onChange={(e) =>
                  setData(
                    "website_title",
                    e.target.value
                  )
                }
              />

              {errors.website_title && (
                <span
                  className={
                    styles.error
                  }
                >
                  {
                    errors.website_title
                  }
                </span>
              )}
            </div>
          </div>

          <div
            className={
              styles.formGroup
            }
          >
            <label>
              Website Tagline
            </label>

            <input
              type="text"
              value={
                data.website_tagline
              }
              placeholder="Trade smarter. Grow faster."
              onChange={(e) =>
                setData(
                  "website_tagline",
                  e.target.value
                )
              }
            />
          </div>

          {/* ======================================
              LOGO UPLOAD
          ====================================== */}

          <div
            className={
              styles.web__settings__grid
            }
          >
            <div className={styles.formGroup}>
            <label>Website Logo</label>

            <div className={styles.uploadCard}>
              {(logoPreview || data.website_logo) ? (
                <div className={styles.imagePreview}>
                  <img
                    src={
                      logoPreview ||
                      data.website_logo
                    }
                    alt="Website Logo"
                  />

                  <div
                    className={
                      styles.imageActions
                    }
                  >
                    <label
                      className={
                        styles.changeBtn
                      }
                    >
                      Change Logo

                      <input
                        hidden
                        type="file"
                        accept="image/*"
                        onChange={(
                          e
                        ) => {
                          const file =
                            e.target
                              .files?.[0]

                          if (!file)
                            return

                          setData(
                            "logo",
                            file
                          )

                          setLogoPreview(
                            URL.createObjectURL(
                              file
                            )
                          )
                        }}
                      />
                    </label>

                    <button
                      type="button"
                      className={
                        styles.removeBtn
                      }
                      onClick={() => {
                        setData(
                          "logo",
                          null
                        )

                        setLogoPreview("")
                      }}
                    >
                      Remove
                    </button>
                  </div>
                </div>
              ) : (
                <label
                  className={
                    styles.uploadArea
                  }
                >
                  <input
                    hidden
                    type="file"
                    accept="image/*"
                    onChange={(e) => {
                      const file =
                        e.target.files?.[0]

                      if (!file) return

                      setData(
                        "logo",
                        file
                      )

                      setLogoPreview(
                        URL.createObjectURL(
                          file
                        )
                      )
                    }}
                  />

                  {/* <div
                    className={
                      styles.uploadIcon
                    }
                  >
                    +
                  </div> */}

                  <h4 style={{paddingTop: "6rem"}}>
                    Upload Website Logo
                  </h4>

                  <p>
                    PNG, SVG or JPG
                  </p>

                  <span>
                    Recommended:
                    512×512
                  </span>
                </label>
              )}
            </div>
          </div>

            {/* ======================================
                FAVICON UPLOAD
            ====================================== */}
            <div className={styles.formGroup}>
            <label>
              Website Favicon
            </label>

            <div className={styles.uploadCard}>
              {(faviconPreview ||
                data.website_favicon) ? (
                <div
                  className={
                    styles.imagePreview
                  }
                >
                  <img
                    src={
                      faviconPreview ||
                      data.website_favicon
                    }
                    alt="Website Favicon"
                  />

                  <div
                    className={
                      styles.imageMeta
                    }
                  >
                    <h5>
                      Website Favicon
                    </h5>

                    <p>
                      Displayed in browser
                      tabs and bookmarks.
                    </p>
                  </div>

                  <div
                    className={
                      styles.imageActions
                    }
                  >
                    <label
                      className={
                        styles.changeBtn
                      }
                    >
                      Change Favicon

                      <input
                        hidden
                        type="file"
                        accept="image/*"
                        onChange={(e) => {
                          const file =
                            e.target
                              .files?.[0] ||
                            null

                          setData(
                            "favicon",
                            file
                          )

                          if (file) {
                            setFaviconPreview(
                              URL.createObjectURL(
                                file
                              )
                            )
                          }
                        }}
                      />
                    </label>
                  </div>
                </div>
              ) : (
                <label
                  className={
                    styles.uploadArea
                  }
                >
                  <div
                    className={
                      styles.uploadIcon
                    }
                  >
                    🖼️
                  </div>

                  <h4>
                    Upload Website
                    Favicon
                  </h4>

                  <p>
                    PNG, ICO or WEBP
                  </p>

                  <span>
                    Recommended:
                    512 × 512px
                  </span>

                  <input
                    hidden
                    type="file"
                    accept="image/*"
                    onChange={(e) => {
                      const file =
                        e.target
                          .files?.[0] ||
                        null

                      setData(
                        "favicon",
                        file
                      )

                      if (file) {
                        setFaviconPreview(
                          URL.createObjectURL(
                            file
                          )
                        )
                      }
                    }}
                  />
                </label>
              )}
            </div>
          </div>
          </div>
        </div>

       {/* ======================================
            CONTACT INFORMATION
        ====================================== */}

        <div className={styles.sectionCard}>
          <div className={styles.sectionHeader}>
            <h3>
              Contact Information
            </h3>

            <p>
              Configure all public and
              administrative contact
              channels for the platform.
            </p>
          </div>

          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Office Address
              </label>

              <input
                type="text"
                value={data.office_address}
                placeholder="Enter office address"
                onChange={(e) =>
                  setData(
                    "office_address",
                    e.target.value
                  )
                }
              />

              {errors.office_address && (
                <span className={styles.error}>
                  {
                    errors.office_address
                  }
                </span>
              )}
            </div>

            <div className={styles.formGroup}>
              <label>
                Contact Phone
              </label>

              <input
                type="text"
                value={data.contact_phone}
                placeholder="+1 000 000 0000"
                onChange={(e) =>
                  setData(
                    "contact_phone",
                    e.target.value
                  )
                }
              />

              {errors.contact_phone && (
                <span className={styles.error}>
                  {
                    errors.contact_phone
                  }
                </span>
              )}
            </div>
          </div>

          <div className={styles.web__settings__grid}>
            {/* <div className={styles.formGroup}>
              <label>
                Contact Email
              </label>

              <input
                type="email"
                value={data.contact_email}
                placeholder="contact@example.com"
                onChange={(e) =>
                  setData(
                    "contact_email",
                    e.target.value
                  )
                }
              />

              {errors.contact_email && (
                <span className={styles.error}>
                  {
                    errors.contact_email
                  }
                </span>
              )}
            </div> */}

            {/* <div className={styles.formGroup}>
              <label>
                Support Email
              </label>

              <input
                type="email"
                value={data.support_email}
                placeholder="support@example.com"
                onChange={(e) =>
                  setData(
                    "support_email",
                    e.target.value
                  )
                }
              />

              {errors.support_email && (
                <span className={styles.error}>
                  {
                    errors.support_email
                  }
                </span>
              )}
            </div> */}
          </div>

          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Website Email
              </label>

              <input
                type="email"
                value={data.website_email}
                placeholder="admin@example.com"
                onChange={(e) =>
                  setData(
                    "website_email",
                    e.target.value
                  )
                }
              />

              <small>
                Used for system
                notifications,
                contact form emails,
                KYC notifications and
                administrative alerts.
              </small>

              {errors.website_email && (
                <span className={styles.error}>
                  {
                    errors.website_email
                  }
                </span>
              )}
            </div>

            <div className={styles.formGroup}>
              <label>
                WhatsApp Number
              </label>

              <input
                type="text"
                value={
                  data.whatsapp_number
                }
                placeholder="+234xxxxxxxxxx"
                onChange={(e) =>
                  setData(
                    "whatsapp_number",
                    e.target.value
                  )
                }
              />
            </div>
          </div>
        </div>

        {/* ======================================
            SOCIAL MEDIA LINKS
        ====================================== */}

        {/* <div className={styles.sectionCard}>
          <div className={styles.sectionHeader}>
            <h3>
              Social Media Links
            </h3>

            <p>
              Add your official social
              media profiles.
            </p>
          </div>

          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Facebook URL
              </label>

              <input
                type="url"
                value={data.facebook_url}
                placeholder="https://facebook.com/yourpage"
                onChange={(e) =>
                  setData(
                    "facebook_url",
                    e.target.value
                  )
                }
              />
            </div>

            <div className={styles.formGroup}>
              <label>
                Twitter / X URL
              </label>

              <input
                type="url"
                value={data.twitter_url}
                placeholder="https://x.com/yourprofile"
                onChange={(e) =>
                  setData(
                    "twitter_url",
                    e.target.value
                  )
                }
              />
            </div>
          </div>

          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Instagram URL
              </label>

              <input
                type="url"
                value={
                  data.instagram_url
                }
                placeholder="https://instagram.com/yourprofile"
                onChange={(e) =>
                  setData(
                    "instagram_url",
                    e.target.value
                  )
                }
              />
            </div>

            <div className={styles.formGroup}>
              <label>
                Telegram URL
              </label>

              <input
                type="url"
                value={data.telegram_url}
                placeholder="https://t.me/yourchannel"
                onChange={(e) =>
                  setData(
                    "telegram_url",
                    e.target.value
                  )
                }
              />
            </div>
          </div>

          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                LinkedIn URL
              </label>

              <input
                type="url"
                value={
                  data.linkedin_url
                }
                placeholder="https://linkedin.com/company/yourcompany"
                onChange={(e) =>
                  setData(
                    "linkedin_url",
                    e.target.value
                  )
                }
              />
            </div>

            <div className={styles.formGroup}>
              <label>
                YouTube URL
              </label>

              <input
                type="url"
                value={data.youtube_url}
                placeholder="https://youtube.com/@yourchannel"
                onChange={(e) =>
                  setData(
                    "youtube_url",
                    e.target.value
                  )
                }
              />
            </div>
          </div>
        </div> */}

                {/* ======================================
            SEO SETTINGS
        ====================================== */}

        <div className={styles.sectionCard}>
          <div className={styles.sectionHeader}>
            <h3>
              SEO Settings
            </h3>

            <p>
              Configure search engine
              optimization and social
              sharing information.
            </p>
          </div>

          <div className={styles.formGroup}>
            <label>
              Meta Title
            </label>

            <input
              type="text"
              value={data.meta_title}
              placeholder="TraderPlus - Smart Investment Platform"
              onChange={(e) =>
                setData(
                  "meta_title",
                  e.target.value
                )
              }
            />

            {errors.meta_title && (
              <span className={styles.error}>
                {errors.meta_title}
              </span>
            )}
          </div>

          <div className={styles.formGroup}>
            <label>
              Meta Description
            </label>

            <textarea
              value={
                data.meta_description
              }
              placeholder="Write a concise description about your platform..."
              onChange={(e) =>
                setData(
                  "meta_description",
                  e.target.value
                )
              }
            />

            {errors.meta_description && (
              <span className={styles.error}>
                {
                  errors.meta_description
                }
              </span>
            )}
          </div>

          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Meta Keywords
              </label>

              <input
                type="text"
                value={
                  data.meta_keywords
                }
                placeholder="trading, forex, crypto, investment"
                onChange={(e) =>
                  setData(
                    "meta_keywords",
                    e.target.value
                  )
                }
              />

              <small>
                Separate keywords
                using commas.
              </small>
            </div>

            <div className={styles.formGroup}>
              <label>
                Canonical URL
              </label>

              <input
                type="url"
                value={
                  data.canonical_url
                }
                placeholder="https://yourwebsite.com"
                onChange={(e) =>
                  setData(
                    "canonical_url",
                    e.target.value
                  )
                }
              />
            </div>
          </div>
        </div>

        {/* ======================================
            LEGAL SETTINGS
        ====================================== */}

        {/* <div className={styles.sectionCard}>
          <div className={styles.sectionHeader}>
            <h3>
              Legal & Compliance
            </h3>

            <p>
              Configure legal pages
              and compliance-related
              settings.
            </p>
          </div>

          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Terms &
                Conditions URL
              </label>

              <input
                type="url"
                value={
                  data.terms_url
                }
                placeholder="https://yourwebsite.com/terms"
                onChange={(e) =>
                  setData(
                    "terms_url",
                    e.target.value
                  )
                }
              />
            </div>

            <div className={styles.formGroup}>
              <label>
                Privacy Policy URL
              </label>

              <input
                type="url"
                value={
                  data.privacy_url
                }
                placeholder="https://yourwebsite.com/privacy"
                onChange={(e) =>
                  setData(
                    "privacy_url",
                    e.target.value
                  )
                }
              />
            </div>
          </div>

          <div className={styles.formGroup}>
            <label>
              Risk Disclaimer
            </label>

            <textarea
              value={
                data.risk_disclaimer
              }
              placeholder="Enter your trading and investment risk disclaimer..."
              onChange={(e) =>
                setData(
                  "risk_disclaimer",
                  e.target.value
                )
              }
            />
          </div>

          <div className={styles.formGroup}>
            <label>
              Copyright Text
            </label>

            <input
              type="text"
              value={
                data.copyright_text
              }
              placeholder="© 2026 TraderPlus. All rights reserved."
              onChange={(e) =>
                setData(
                  "copyright_text",
                  e.target.value
                )
              }
            />
          </div>
        </div> */}

        {/* ======================================
            FINANCIAL SETTINGS
        ====================================== */}

        <div className={styles.sectionCard}>
          <div className={styles.sectionHeader}>
            <h3>
              Financial Settings
            </h3>

            <p>
              Configure default
              platform financial
              information.
            </p>
          </div>

          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Base Currency
              </label>

              <input
                type="text"
                value={
                  data.base_currency
                }
                placeholder="USD"
                onChange={(e) =>
                  setData(
                    "base_currency",
                    e.target.value as string
                  )
                }
              />
              <small>Please enter the value in all caps (capital letters only)</small>
            </div>

            <div className={styles.formGroup}>
              <label>
                Currency Symbol
              </label>

              <input
                type="text"
                value={
                  data.currency_symbol
                }
                placeholder="$"
                onChange={(e) =>
                  setData(
                    "currency_symbol",
                    e.target.value
                  )
                }
              />
            </div>
          </div>

          {/* <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Minimum Deposit
              </label>

              <input
                type="number"
                value={
                  data.minimum_deposit
                }
                onChange={(e) =>
                  setData(
                    "minimum_deposit",
                    e.target.value
                  )
                }
              />
            </div>

            <div className={styles.formGroup}>
              <label>
                Minimum Withdrawal
              </label>

              <input
                type="number"
                value={
                  data.minimum_withdrawal
                }
                onChange={(e) =>
                  setData(
                    "minimum_withdrawal",
                    e.target.value
                  )
                }
              />
            </div>
          </div> */}

          {/* <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>
                Withdrawal Fee (%)
              </label>

              <input
                type="number"
                value={
                  data.withdrawal_fee
                }
                onChange={(e) =>
                  setData(
                    "withdrawal_fee",
                    e.target.value
                  )
                }
              />
            </div>

            <div className={styles.formGroup}>
              <label>
                Referral Bonus (%)
              </label>

              <input
                type="number"
                value={
                  data.referral_bonus
                }
                onChange={(e) =>
                  setData(
                    "referral_bonus",
                    e.target.value
                  )
                }
              />
            </div>
          </div> */}
        </div>

                {/* ======================================
            PLATFORM MESSAGES
        ====================================== */}

        <div className={styles.sectionCard}>
          <div className={styles.sectionHeader}>
            <h3>
              Platform Messages
            </h3>

            <p>
              Configure system-wide
              messages displayed to
              users during important
              actions and restrictions.
            </p>
          </div>

          <div className={styles.formGroup}>
            <label>
              Announcement Banner
            </label>

            <textarea
              value={data.announcement}
              placeholder="Enter announcement message..."
              onChange={(e) =>
                setData(
                  "announcement",
                  e.target.value
                )
              }
            />

            <small>
              Displayed globally
              across the platform.
            </small>
          </div>

          <div className={styles.formGroup}>
            <label>
              Withdraw Disabled Message
            </label>

            <textarea
              value={
                data.withdraw_disabled_message
              }
              placeholder="Message users will see when withdrawals are disabled."
              onChange={(e) =>
                setData(
                  "withdraw_disabled_message",
                  e.target.value
                )
              }
            />
          </div>

          <div className={styles.formGroup}>
            <label>
              Blocked User Message
            </label>

            <textarea
              value={
                data.blocked_user_message
              }
              placeholder="Message shown to blocked users."
              onChange={(e) =>
                setData(
                  "blocked_user_message",
                  e.target.value
                )
              }
            />
          </div>

          <div className={styles.formGroup}>
            <label>
              Upgrade Required Message
            </label>

            <textarea
              value={
                data.upgrade_required_message
              }
              placeholder="Message shown when an upgrade is required."
              onChange={(e) =>
                setData(
                  "upgrade_required_message",
                  e.target.value
                )
              }
            />
          </div>
        </div>

        {/* ======================================
            WEBSITE PREFERENCES
        ====================================== */}

        <div className={styles.sectionCard}>
          <div className={styles.sectionHeader}>
            <h3>
              Website Preferences
            </h3>

            <p>
              Control platform-wide
              behaviors and features.
            </p>
          </div>
          <div className={styles.toggleGrid}>
          {/* Announcement */}

          <div className={styles.toggleCard}>
            <div className={styles.toggleContent}>
              <h4>Enable Announcement</h4>

              <p>
                Display the website announcement
                banner across public pages and
                user dashboards.
              </p>
            </div>

            <label className={styles.switch}>
              <input
                type="checkbox"
                checked={data.enable_announcement}
                onChange={(e) =>
                  setData(
                    "enable_announcement",
                    e.target.checked
                  )
                }
              />

              <span className={styles.slider}></span>
            </label>
          </div>

          {/* Withdrawals */}

          <div className={styles.toggleCard}>
            <div className={styles.toggleContent}>
              <h4>Enable Withdrawals</h4>

              <p>
                Allow users to submit withdrawal
                requests from their accounts.
              </p>
            </div>

            <label className={styles.switch}>
              <input
                type="checkbox"
                checked={data.enable_withdrawals}
                onChange={(e) =>
                  setData(
                    "enable_withdrawals",
                    e.target.checked
                  )
                }
              />

              <span className={styles.slider}></span>
            </label>
          </div>

          {/* KYC */}

          <div className={styles.toggleCard}>
            <div className={styles.toggleContent}>
              <h4>Require KYC Verification</h4>

              <p>
                Users must complete identity
                verification before withdrawals
                can be processed.
              </p>
            </div>

            <label className={styles.switch}>
              <input
                type="checkbox"
                checked={
                  data.require_kyc_for_withdrawal
                }
                onChange={(e) =>
                  setData(
                    "require_kyc_for_withdrawal",
                    e.target.checked
                  )
                }
              />

              <span className={styles.slider}></span>
            </label>
          </div>

          {/* Email Verification */}

          <div className={styles.toggleCard}>
            <div className={styles.toggleContent}>
              <h4>Require Email Verification</h4>

              <p>
                Users must verify their email
                address before they can access
                platform features.
              </p>
            </div>

            <label className={styles.switch}>
              <input
                type="checkbox"
                checked={
                  data.require_email_verification
                }
                onChange={(e) =>
                  setData(
                    "require_email_verification",
                    e.target.checked
                  )
                }
              />

              <span className={styles.slider}></span>
            </label>
          </div>
        </div>
        </div><br />

        {/* ======================================
        GOOGLE RECAPTCHA
      ====================================== */}

      <div className={styles.sectionCard}>
        <div className={styles.sectionHeader}>
          <h3>Google reCAPTCHA</h3>

          <p>
            Protect your registration page from bots by enabling
            Google reCAPTCHA.
          </p>
        </div>

        <div className={styles.toggleCard}>
          <div className={styles.toggleContent}>
            <h4>Enable reCAPTCHA</h4>

            <p>
              Display the Google "I'm not a robot" checkbox on the
              registration page.
            </p>
          </div>

          <label className={styles.switch}>
            <input
              type="checkbox"
              checked={data.enable_recaptcha}
              onChange={(e) =>
                setData(
                  "enable_recaptcha",
                  e.target.checked
                )
              }
            />

            <span className={styles.slider}></span>
          </label>
        </div><br />

        {data.enable_recaptcha && (
          <div className={styles.web__settings__grid}>
            <div className={styles.formGroup}>
              <label>Site Key</label>

              <input
                type="text"
                placeholder="Google reCAPTCHA Site Key"
                value={data.recaptcha_site_key}
                onChange={(e) =>
                  setData(
                    "recaptcha_site_key",
                    e.target.value
                  )
                }
              />

              <small>
                Obtain this from the Google reCAPTCHA
                Console.
              </small>

              {errors.recaptcha_site_key && (
                <span className={styles.error}>
                  {errors.recaptcha_site_key}
                </span>
              )}
            </div>

            <div className={styles.formGroup}>
              <label>Secret Key</label>

              <input
                type="password"
                placeholder="Google reCAPTCHA Secret Key"
                value={data.recaptcha_secret_key}
                onChange={(e) =>
                  setData(
                    "recaptcha_secret_key",
                    e.target.value
                  )
                }
              />

              <small>
                This key is used only by the backend to
                verify requests.
              </small>

              {errors.recaptcha_secret_key && (
                <span className={styles.error}>
                  {errors.recaptcha_secret_key}
                </span>
              )}
            </div>
          </div>
        )}
      </div>

        {/* ======================================
            SUBMIT
        ====================================== */}

        <div className={styles.submitSection}>
          <button
            type="submit"
            disabled={processing}
            className={styles.submitBtn}
          >
            {processing
              ? "Saving Settings..."
              : "Update Website Settings"}
          </button>
        </div>
      </form>
    </div>
  )
}

export default WebsiteSettings