import styles from "./chatbox-phone.module.css";

interface ChatboxPhoneProps {
  headerColor: string;
}

export default function ChatboxPhone({ headerColor }: ChatboxPhoneProps) {
  return (
    <div className={styles.phoneContainer}>
      <div className={styles.phone}>
        <div
          className={styles.phoneHeader}
          style={{
            background: `linear-gradient(149deg, ${headerColor} 0.83%, ${adjustColorBrightness(headerColor, -40)} 100%)`,
          }}
        >
          <div className={styles.chatInterface}>
            <div className={styles.storeHeader}>
              <div className={styles.menuIcon}>
                <div></div>
                <div></div>
                <div></div>
              </div>
              <span className={styles.storeName}>YOUR STORE</span>
              <div className={styles.headerIcons}>
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 14 14"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M10 3.5L7 6.5L4 3.5"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 14 14"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M7 2V7L10 9"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                  />
                </svg>
              </div>
            </div>

            <div className={styles.greeting}>
              <h3>
                Hi 👋
                <br />
                How can we help you?
              </h3>
            </div>

            <div className={styles.chatCard}>
              <div className={styles.cardSection}>
                <h4>Contact us</h4>
                <div className={styles.contactInfo}>
                  <span>📞 By phone</span>
                  <button className={styles.chatNowButton}>💬 Chat now</button>
                </div>
              </div>

              <div className={styles.cardSection}>
                <h4>Order tracking</h4>
                <p>Track your orders</p>
              </div>

              <div className={styles.searchBox}>
                <input type="text" placeholder="Search for help" />
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 14 14"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="6"
                    cy="6"
                    r="4.5"
                    stroke="#999"
                    strokeWidth="1.5"
                  />
                  <path
                    d="M9 9L12 12"
                    stroke="#999"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                  />
                </svg>
              </div>

              <div className={styles.helpTopics}>
                <p>How long will it take to receive my order?</p>
                <p>How to track my order?</p>
                <p>Do you ship internationally?</p>
                <p>I never got my order, what do I do?</p>
                <p>What is your return policy?</p>
              </div>

              <div className={styles.poweredBy}>Powered by Company</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function adjustColorBrightness(color: string, percent: number): string {
  const num = parseInt(color.replace("#", ""), 16);
  const r = Math.max(0, Math.min(255, (num >> 16) + percent));
  const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00ff) + percent));
  const b = Math.max(0, Math.min(255, (num & 0x0000ff) + percent));
  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
}