"use client";

import { useState } from "react";

type AppTab =
  | "home"
  | "pay"
  | "transactions"
  | "rewards"
  | "insights"
  | "security";

const tabs: { id: AppTab; label: string }[] = [
  { id: "home", label: "Home" },
  { id: "pay", label: "Pay" },
  { id: "transactions", label: "Transactions" },
  { id: "rewards", label: "Rewards" },
  { id: "insights", label: "Insights" },
  { id: "security", label: "Security" },
];

export default function AppPreviewSection() {
  const [activeTab, setActiveTab] = useState<AppTab>("home");

  return (
    <section className="w-full bg-[#F6F1FA]">
      <div
        className="
          mx-auto
          flex
          w-full
          max-w-[1180px]
          flex-col
          items-center
          px-5
          py-16
          sm:px-6
          md:py-20
          lg:px-0
          lg:pb-[90px]
          lg:pt-[0px]
        "
      >
        {/* Phone */}
        <div
          className="
            group
            relative
            w-full
            max-w-[330px]
            transition-transform
            duration-500
            ease-out
            [transform:perspective(1000px)_rotateY(-8deg)_rotateX(2deg)]
            hover:[transform:perspective(1000px)_rotateY(0deg)_rotateX(0deg)]
            -rotate-[-2deg]
            hover:rotate-0
            sm:max-w-[300px]
            md:max-w-[300px]
          "
        >
          <div
            className="
              relative
              aspect-[0.50/1]
              w-full
              overflow-hidden
              rounded-[46px]
              border-[11px]
              border-[#240022]
              bg-[#F6F0FA]
              shadow-[0_28px_60px_rgba(46,0,52,0.16)]
            "
          >
            {/* Dynamic Island */}
            <div
              className="
                absolute
                left-1/2
                top-[10px]
                z-20
                h-[18px]
                w-[76px]
                -translate-x-1/2
                rounded-full
                bg-[#240022]
              "
            />

            {/* Screen content */}
            <div className="h-full w-full px-4 pb-5 pt-12 sm:px-5">
              {activeTab === "home" && <HomeScreen />}
              {activeTab === "pay" && <PayScreen />}
              {activeTab === "transactions" && <TransactionsScreen />}
              {activeTab === "rewards" && <RewardsScreen />}
              {activeTab === "insights" && <InsightsScreen />}
              {activeTab === "security" && <SecurityScreen />}
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div
          className="
            mt-7
            flex
            max-w-[350px]
            flex-wrap
            items-center
            justify-center
            gap-2
          "
        >
          {tabs.map((tab) => {
            const active = activeTab === tab.id;

            return (
              <button
                key={tab.id}
                type="button"
                onClick={() => setActiveTab(tab.id)}
                className={`
                  min-h-[38px]
                  rounded-full
                  border
                  px-4
                  text-[11px]
                  font-semibold
                  transition-all
                  duration-300
                  sm:px-5
                  sm:text-[14px]

                  ${
                    active
                      ? `
                        border-transparent
                        bg-gradient-to-r
                        from-[#9d28e8]
                        via-[#d80aa6]
                        to-[#f00088]
                        text-white
                        shadow-[0_10px_24px_rgba(225,0,145,0.22)]
                      `
                      : `
                        border-[#ddd3e2]
                        bg-white
                        text-[#4e4154]
                        hover:border-[#c794dc]
                      `
                  }
                `}
              >
                {tab.label}
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   HOME
========================================================= */

function HomeScreen() {
  return (
    <div className="h-full">
      <div className="flex items-center justify-between text-[11px] text-[#685b6d]">
        <span>Hi, Ananya</span>

        <span
          className="
            flex
            h-6
            w-6
            items-center
            justify-center
            rounded-full
            bg-gradient-to-br
            from-[#a724d8]
            to-[#ef008c]
            font-bold
            text-white
          "
        >
          A
        </span>
      </div>

      <div
        className="
          mt-3
          rounded-[15px]
          bg-gradient-to-r
          from-[#a323d5]
          via-[#d80aa7]
          to-[#f00088]
          p-4
          text-white
          shadow-[0_10px_24px_rgba(213,0,146,0.16)]
        "
      >
        <p className="text-[11px] font-semibold uppercase tracking-[0.16em]">
          Available to spend
        </p>

        <p className="mt-2 text-[20px] font-[800]">
          ₹ —,—,— 
        </p>

        <p className="mt-2 text-[10px] text-white/80">
          ShePays RuPay Card · limit placeholder
        </p>
      </div>

      <div className="mt-3 grid grid-cols-4 gap-2">
        {["Pay", "Scan", "Bills", "Rewards"].map((item) => (
          <div
            key={item}
            className="
              rounded-[10px]
              border
              border-[#e8dfeb]
              bg-white
              px-1
              py-3
              text-center
              shadow-[0_4px_12px_rgba(40,0,45,0.04)]
            "
          >
            <span className="text-[15px] text-[#9f25cf]">✦</span>

            <p className="mt-1 text-[11px] font-semibold text-[#493d50]">
              {item}
            </p>
          </div>
        ))}
      </div>

      <ScreenCard className="mt-3">
        <ScreenLabel>This week</ScreenLabel>

        <div className="mt-4 flex h-[74px] items-end gap-2">
          {[38, 54, 44, 68, 35, 50, 62].map((height, index) => (
            <div
              key={index}
              className="
                flex-1
                rounded-t-[4px]
                bg-gradient-to-t
                from-[#ef008c]
                to-[#9f29d9]
              "
              style={{ height: `${height}%` }}
            />
          ))}
        </div>
      </ScreenCard>

      <ScreenCard className="mt-3">
        <ScreenLabel>Recent</ScreenLabel>

        <TransactionRow
          title="Blue Tokai"
          subtitle="Food & drink · UPI"
        />

        <TransactionRow
          title="Salary credit"
          subtitle="Bank transfer"
          positive
        />
      </ScreenCard>
    </div>
  );
}

/* =========================================================
   PAY
========================================================= */

function PayScreen() {
  return (
    <div className="flex h-full flex-col">
      <div className="flex items-center justify-between">
        <span className="text-[9px] font-semibold text-[#514454]">← Pay</span>

        <span className="rounded-full bg-[#f2e7fa] px-2 py-1 text-[9px] text-[#9b28d2]">
          UPI
        </span>
      </div>

      <ScreenCard className="mt-3 text-center">
        <div
          className="
            mx-auto
            flex
            h-[52px]
            w-[52px]
            items-center
            justify-center
            rounded-full
            bg-gradient-to-br
            from-[#a723d7]
            to-[#ef008c]
            text-[17px]
            font-bold
            text-white
          "
        >
          R
        </div>

        <h4 className="mt-3 text-[15px] font-bold text-[#2c082c]">
          Riya Malhotra
        </h4>

        <p className="mt-1 text-[10px] text-[#85778a]">
          riya@shepays
        </p>

        <p className="mt-5 text-[24px] font-[800] text-[#250022]">
          ₹ ———
        </p>

        <p className="mt-2 text-[10px] text-[#948796]">Add a note</p>
      </ScreenCard>

      <ScreenCard className="mt-3">
        <ScreenLabel>Pay using</ScreenLabel>

        <PaymentMethod
          title="ShePays Card"
          subtitle="Earns rewards"
          selected
        />

        <PaymentMethod
          title="Savings account"
          subtitle="UPI · linked bank"
        />
      </ScreenCard>

      <button
        type="button"
        className="
          mt-auto
          min-h-[44px]
          rounded-full
          bg-gradient-to-r
          from-[#9d28e8]
          to-[#f00088]
          text-[11px]
          font-bold
          text-white
        "
      >
        Slide to pay
      </button>
    </div>
  );
}

/* =========================================================
   TRANSACTIONS
========================================================= */

function TransactionsScreen() {
  return (
    <div>
      <div className="flex items-center justify-between">
        <span className="text-[10px] font-semibold text-[#514454]">
          Transactions
        </span>

        <span className="rounded-full bg-[#f3e9fa] px-2 py-1 text-[8px] text-[#9b28d2]">
          All
        </span>
      </div>

      <ScreenCard className="mt-3">
        <ScreenLabel>Today</ScreenLabel>

        <TransactionRow title="Blue Tokai" subtitle="Food & drink" />
        <TransactionRow title="Fuel stop" subtitle="Travel" />
        <TransactionRow title="Refund" subtitle="Shopping" positive />
      </ScreenCard>

      <ScreenCard className="mt-3">
        <ScreenLabel>Yesterday</ScreenLabel>

        <TransactionRow title="Streaming" subtitle="Subscription" />
        <TransactionRow title="Pharmacy" subtitle="Health" />
        <TransactionRow title="Rent split" subtitle="Sent to Riya" />
      </ScreenCard>
    </div>
  );
}

/* =========================================================
   REWARDS
========================================================= */

function RewardsScreen() {
  return (
    <div>
      <div className="flex items-center justify-between">
        <span className="text-[9px] font-semibold text-[#514454]">
          Rewards
        </span>

        <span className="rounded-full bg-[#f3e9fa] px-2 py-1 text-[8px] text-[#9b28d2]">
          Tier · placeholder
        </span>
      </div>

      <div
        className="
          mt-3
          rounded-[15px]
          bg-gradient-to-r
          from-[#a824d6]
          via-[#d20cae]
          to-[#f00088]
          p-4
          text-white
        "
      >
        <ScreenLabel light>Reward points</ScreenLabel>

        <p className="mt-3 text-[18px] font-[800]">—,—</p>

        <p className="mt-2 text-[7px] text-white/80">
          Earned on card and UPI spends
        </p>
      </div>

      <ScreenCard className="mt-3">
        <ScreenLabel>Offers for you</ScreenLabel>

        {["Partner brand", "Partner brand", "Partner brand"].map(
          (item, index) => (
            <div
              key={index}
              className="
                flex
                items-center
                justify-between
                border-b
                border-[#eee7f0]
                py-2
                last:border-b-0
              "
            >
              <div>
                <p className="text-[8px] font-semibold text-[#4e4152]">
                  {item}
                </p>

                <p className="mt-1 text-[6px] text-[#8b7d8f]">
                  Cashback · placeholder
                </p>
              </div>

              <span className="rounded-full bg-[#f5ebfb] px-2 py-1 text-[6px] text-[#a327d5]">
                Claim
              </span>
            </div>
          )
        )}
      </ScreenCard>

      <ScreenCard className="mt-3">
        <ScreenLabel>Milestone progress</ScreenLabel>

        <div className="mt-3 h-[7px] overflow-hidden rounded-full bg-[#eee5f4]">
          <div className="h-full w-[58%] rounded-full bg-gradient-to-r from-[#9c28da] to-[#ff7b21]" />
        </div>

        <p className="mt-2 text-[6px] text-[#8b7d8f]">
          Next unlock at spend milestone
        </p>
      </ScreenCard>
    </div>
  );
}

/* =========================================================
   INSIGHTS
========================================================= */

function InsightsScreen() {
  return (
    <div>
      <div className="flex items-center justify-between">
        <span className="text-[8px] font-semibold text-[#514454]">
          Insights
        </span>

        <span className="rounded-full bg-[#f3e9fa] px-2 py-1 text-[8px] text-[#9b28d2]">
          This month
        </span>
      </div>

      <ScreenCard className="mt-3">
        <ScreenLabel>Where it went</ScreenLabel>

        <div className="mt-3 flex justify-center">
          <div
            className="
              relative
              h-[90px]
              w-[90px]
              rounded-full
              bg-[conic-gradient(#8f2bd4_0_32%,#eb008c_32%_60%,#ff7a20_60%_78%,#d6b5e9_78%_100%)]
            "
          >
            <div
              className="
                absolute
                inset-[18px]
                flex
                items-center
                justify-center
                rounded-full
                bg-white
                text-center
                text-[7px]
                font-semibold
                leading-tight
                text-[#75687b]
              "
            >
              spend
              <br />
              split
            </div>
          </div>
        </div>

        <div className="mt-4 flex flex-wrap justify-center gap-3 text-[6px] text-[#786c7e]">
          <LegendDot color="bg-[#8f2bd4]" text="Shopping" />
          <LegendDot color="bg-[#eb008c]" text="Food" />
          <LegendDot color="bg-[#ff7a20]" text="Travel" />
          <LegendDot color="bg-[#d6b5e9]" text="Bills" />
        </div>
      </ScreenCard>

      <ScreenCard className="mt-3">
        <ScreenLabel>Nudge</ScreenLabel>

        <p className="mt-3 text-[7px] leading-[1.6] text-[#6f6276]">
          Subscriptions are running higher than your usual month. Three renew
          this week.
        </p>
      </ScreenCard>

      <ScreenCard className="mt-3">
        <ScreenLabel>Credit health</ScreenLabel>

        <TransactionRow
          title="Utilisation"
          subtitle="Keep it under 30%"
        />
      </ScreenCard>
    </div>
  );
}

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

function SecurityScreen() {
  return (
    <div>
      <div className="flex items-center justify-between">
        <span className="text-[8px] font-semibold text-[#514454]">
          Profile
        </span>

        <span className="rounded-full bg-[#f3e9fa] px-2 py-1 text-[8px] text-[#9b28d2]">
          Verified
        </span>
      </div>

      <ScreenCard className="mt-3 text-center">
        <div
          className="
            mx-auto
            flex
            h-[48px]
            w-[48px]
            items-center
            justify-center
            rounded-full
            bg-gradient-to-br
            from-[#a824d6]
            to-[#ef008c]
            text-[16px]
            font-bold
            text-white
          "
        >
          A
        </div>

        <h4 className="mt-3 text-[15px] font-bold text-[#250022]">
          Ananya Sharma
        </h4>

        <p className="mt-1 text-[10px] text-[#8d808f]">
          ananya@shepays
        </p>
      </ScreenCard>

      <ScreenCard className="mt-3">
        <ScreenLabel>Security</ScreenLabel>

        <SecurityRow title="App lock" subtitle="Biometric" status="On" />
        <SecurityRow title="Freeze card" subtitle="Instant, reversible" status="Off" />
        <SecurityRow title="Spend limits" subtitle="Daily & per category" status="Set" />
      </ScreenCard>

      <ScreenCard className="mt-3">
        <ScreenLabel>Alerts</ScreenLabel>

        <TransactionRow
          title="Card used at a new merchant"
          subtitle="2 min ago"
        />

        <TransactionRow
          title="Reward unlocked"
          subtitle="Today"
        />
      </ScreenCard>
    </div>
  );
}

/* =========================================================
   SMALL REUSABLE PHONE COMPONENTS
========================================================= */

function ScreenCard({
  children,
  className = "",
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={`
        rounded-[14px]
        border
        border-[#e5dcea]
        bg-white
        p-3
        shadow-[0_5px_14px_rgba(42,0,45,0.04)]
        ${className}
      `}
    >
      {children}
    </div>
  );
}

function ScreenLabel({
  children,
  light = false,
}: {
  children: React.ReactNode;
  light?: boolean;
}) {
  return (
    <p
      className={`
        text-[9px]
        font-semibold
        uppercase
        tracking-[0.2em]
        ${light ? "text-white/80" : "text-[#746779]"}
      `}
    >
      {children}
    </p>
  );
}

function TransactionRow({
  title,
  subtitle,
  positive = false,
}: {
  title: string;
  subtitle: string;
  positive?: boolean;
}) {
  return (
    <div
      className="
        mt-2
        flex
        items-center
        gap-2
        border-b
        border-[#eee7f0]
        pb-2
        last:border-b-0
      "
    >
      <div
        className="
          flex
          h-6
          w-6
          shrink-0
          items-center
          justify-center
          rounded-[7px]
          bg-[#f4ecf8]
          text-[7px]
          text-[#8e2cc9]
        "
      >
        ✦
      </div>

      <div className="min-w-0 flex-1">
        <p className="truncate text-[11px] font-semibold text-[#4c3f50]">
          {title}
        </p>

        <p className="mt-[2px] truncate text-[9px] text-[#918493]">
          {subtitle}
        </p>
      </div>

      <span
        className={`
          text-[8px]
          font-semibold
          ${positive ? "text-[#20b979]" : "text-[#4a3d4d]"}
        `}
      >
        {positive ? "+" : "−"}
      </span>
    </div>
  );
}

function PaymentMethod({
  title,
  subtitle,
  selected = false,
}: {
  title: string;
  subtitle: string;
  selected?: boolean;
}) {
  return (
    <div
      className="
        mt-2
        flex
        items-center
        justify-between
        border-b
        border-[#eee7f0]
        pb-2
        last:border-b-0
      "
    >
      <div>
        <p className="text-[11px] font-semibold text-[#4c3f50]">{title}</p>

        <p className="mt-1 text-[9px] text-[#918493]">{subtitle}</p>
      </div>

      {selected && (
        <span className="rounded-full bg-[#f4e7fb] px-2 py-1 text-[8px] text-[#a229d4]">
          Selected
        </span>
      )}
    </div>
  );
}

function SecurityRow({
  title,
  subtitle,
  status,
}: {
  title: string;
  subtitle: string;
  status: string;
}) {
  return (
    <div
      className="
        mt-2
        flex
        items-center
        justify-between
        border-b
        border-[#eee7f0]
        pb-2
        last:border-b-0
      "
    >
      <div>
        <p className="text-[10px] font-semibold text-[#4c3f50]">{title}</p>
        <p className="mt-1 text-[9px] text-[#918493]">{subtitle}</p>
      </div>

      <span className="rounded-full bg-[#f4e7fb] px-2 py-1 text-[6px] text-[#a229d4]">
        {status}
      </span>
    </div>
  );
}

function LegendDot({
  color,
  text,
}: {
  color: string;
  text: string;
}) {
  return (
    <span className="flex items-center gap-1">
      <span className={`h-[6px] w-[6px] rounded-[2px] ${color}`} />
      {text}
    </span>
  );
}