/* CardPulse — Animated phone with tab switching */

const HomeScreen = ({ progress }) => {
  const R = 38;
  const C = 2 * Math.PI * R;
  const dash = C * progress;
  return (
    <div className="app-body">
      <div className="app-header">
        <div className="app-title">
          <img src="assets/icon.png" alt="" className="app-title-icon" />
          <span>Home</span>
        </div>
        <button className="add-btn" aria-label="Add">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
          </svg>
        </button>
      </div>

      <div className="hero-card">
        <div className="hero-card-left">
          <div className="hero-label">MIN-SPEND TARGET · APRIL</div>
          <div className="hero-amount">S$1,900</div>
          <div className="hero-meta">
            <div className="meta-col">
              <div className="meta-label">CARDS HIT</div>
              <div className="meta-value">2<span className="meta-faint">/3</span></div>
            </div>
            <div className="meta-col">
              <div className="meta-label">NEXT DEADLINE</div>
              <div className="meta-value meta-accent">4d</div>
            </div>
          </div>
          <div className="hero-foot">S$1,064 left to hit target</div>
        </div>
        <div className="hero-card-right">
          <svg viewBox="0 0 100 100" width="100" height="100">
            <circle cx="50" cy="50" r={R} stroke="rgba(255,255,255,0.08)" strokeWidth="7" fill="none" />
            <circle
              cx="50" cy="50" r={R}
              stroke="url(#ring-grad)"
              strokeWidth="7" fill="none"
              strokeLinecap="round"
              strokeDasharray={`${dash} ${C}`}
              transform="rotate(-90 50 50)"
              style={{ transition: "stroke-dasharray 0.06s linear" }}
            />
            <defs>
              <linearGradient id="ring-grad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#7AA8FF"/>
                <stop offset="100%" stopColor="#4F6BFF"/>
              </linearGradient>
            </defs>
          </svg>
          <div className="ring-center">
            <div className="ring-amount">S$1,064</div>
          </div>
        </div>
      </div>

      <div className="recent-row">
        <div className="recent-title">RECENT TRANSACTIONS</div>
        <div className="recent-link">View all ›</div>
      </div>

      <div className="tx-list">
        <div className="tx-row">
          <div className="tx-icon" style={{ background: "#FF8A3D" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M12 2v20M2 12h20" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"/>
            </svg>
          </div>
          <div className="tx-body">
            <div className="tx-name">Haidilao</div>
            <div className="tx-card">UOB Lady's Solitaire Maste...</div>
          </div>
          <div className="tx-amount">−S$105.00</div>
        </div>
        <div className="tx-row">
          <div className="tx-icon" style={{ background: "#FF8A3D" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="6" stroke="#fff" strokeWidth="2.5"/>
            </svg>
          </div>
          <div className="tx-body">
            <div className="tx-name">Xiang Xiang Hunan</div>
            <div className="tx-card">UOB Lady's Solitaire Maste...</div>
          </div>
          <div className="tx-amount">−S$98.00</div>
        </div>
        <div className="tx-row">
          <div className="tx-icon" style={{ background: "#7C5CFF" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M12 2L4 8l8 6 8-6-8-6zM4 14l8 6 8-6" stroke="#fff" strokeWidth="2" strokeLinejoin="round"/>
            </svg>
          </div>
          <div className="tx-body">
            <div className="tx-name">NTUC</div>
            <div className="tx-card">Citi Cash Back World Maste...</div>
          </div>
          <div className="tx-amount">−S$59.85</div>
        </div>
        <div className="tx-row">
          <div className="tx-icon" style={{ background: "#3DB8FF" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M3 12c4-8 14-8 18 0M3 12c4 8 14 8 18 0" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </div>
          <div className="tx-body">
            <div className="tx-name">Sketch</div>
            <div className="tx-card">CIMB VISA SIGNATURE S...</div>
          </div>
          <div className="tx-amount-col">
            <div className="tx-amount">−S$132.40</div>
            <div className="tx-amount-sub">$98.00 USD</div>
          </div>
        </div>
      </div>

    </div>
  );
};

const AnalysisScreen = () => {
  const period = "Month";
  const categories = [
    { name: "Food & Drinks", amount: "S$962", color: "#FF8A3D" },
    { name: "Health", amount: "S$456", color: "#FF4D6D" },
    { name: "Shopping", amount: "S$170", color: "#D64ACD" },
    { name: "Other", amount: "S$147", color: "#22C7D8" },
    { name: "Groceries", amount: "S$126", color: "#E944B5" },
    { name: "Sports", amount: "S$100", color: "#3E76FF" },
  ];

  // Donut math
  const total = 1961;
  const segments = [
    { value: 962, color: "#FF8A3D" },
    { value: 456, color: "#FF4D6D" },
    { value: 170, color: "#D64ACD" },
    { value: 147, color: "#22C7D8" },
    { value: 126, color: "#E944B5" },
    { value: 100, color: "#3E76FF" },
  ];
  let cumulative = 0;
  const R = 36;
  const C = 2 * Math.PI * R;

  return (
    <div className="app-body">
      <div className="app-header">
        <div className="app-title">
          <img src="assets/icon.png" alt="" className="app-title-icon" />
          <span>Analysis</span>
        </div>
      </div>

      <div className="period-tabs">
        {["Day", "Week", "Month", "Year"].map((p) => (
          <div
            key={p}
            className={`period-tab ${period === p ? "period-tab-active" : ""}`}
          >{p}</div>
        ))}
      </div>

      <div className="period-nav">
        <span className="period-arrow">‹</span>
        <span className="period-label">April 2026</span>
        <span className="period-arrow">›</span>
      </div>

      <div className="total-card">
        <div className="total-label">TOTAL SPEND</div>
        <div className="total-amount">S$2,035.36</div>
        <div className="total-delta">↓ 61% vs March</div>
      </div>

      <div className="donut-row">
        <div className="donut-wrap">
          <svg viewBox="0 0 100 100" width="110" height="110">
            <circle cx="50" cy="50" r={R} fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="14"/>
            {segments.map((s, i) => {
              const len = (s.value / total) * C;
              const offset = -cumulative;
              cumulative += len;
              return (
                <circle
                  key={i}
                  cx="50" cy="50" r={R}
                  fill="none"
                  stroke={s.color}
                  strokeWidth="14"
                  strokeDasharray={`${len} ${C - len}`}
                  strokeDashoffset={offset}
                  transform="rotate(-90 50 50)"
                  style={{ transition: "stroke-dasharray 0.4s" }}
                />
              );
            })}
          </svg>
        </div>
        <div className="cat-list">
          {categories.map((c) => (
            <div className="cat-row" key={c.name}>
              <span className="cat-dot" style={{ background: c.color }}></span>
              <span className="cat-name">{c.name}</span>
              <span className="cat-amount">{c.amount}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="byweek-label">BY WEEK</div>
      <div className="byweek-bars">
        {[
          [18, 9, 6], [26, 14, 11], [32, 20, 9], [24, 13, 7]
        ].map((bar, i) => (
          <div className="bar-col" key={i}>
            <div className="bar bar-1" style={{ height: bar[0] + "px" }}></div>
            <div className="bar bar-2" style={{ height: bar[1] + "px" }}></div>
            <div className="bar bar-3" style={{ height: bar[2] + "px" }}></div>
          </div>
        ))}
      </div>
    </div>
  );
};

const CardsScreen = () => {
  const filter = "All";
  return (
    <div className="app-body">
      <div className="app-header">
        <div className="app-title">
          <img src="assets/icon.png" alt="" className="app-title-icon" />
          <span>Cards</span>
        </div>
        <button className="add-btn" aria-label="Add">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
          </svg>
        </button>
      </div>

      <div className="card-filters">
        {[
          { label: "All", count: 3, active: true },
          { label: "Hit", count: 1 },
          { label: "On track", count: 0 },
          { label: "Behind", count: 2 },
        ].map((f) => (
          <div
            key={f.label}
            className={`card-filter ${filter === f.label ? "card-filter-active" : ""}`}
          >
            {f.label} <span className="card-filter-count">{f.count}</span>
          </div>
        ))}
      </div>

      <div className="card-list">
        <div className="card-item card-item-collapsed">Trust Link Card</div>
        <div className="card-item card-item-collapsed">HSBC Amanah Visa Platinum</div>

        <div className="card-item card-item-expanded">
          <div className="card-item-head">
            <span className="card-item-name">UOB Lady's Solitaire...</span>
            <span className="card-tag card-tag-cash">CASH</span>
          </div>
          <div className="card-item-period">Mar 30 - Apr 29</div>
          <div className="card-item-amount-row">
            <span className="card-amount-big">S$618</span>
            <span className="card-amount-target">/S$600</span>
            <span className="card-status card-status-hit">HIT</span>
          </div>
          <div className="card-progress-bar">
            <div className="card-progress-fill card-progress-hit" style={{ width: "100%" }}></div>
          </div>
        </div>

        <div className="card-item card-item-expanded">
          <div className="card-item-head">
            <span className="card-item-name">CIMB VISA SIGNATU...</span>
            <span className="card-tag card-tag-cash">CASH</span>
          </div>
          <div className="card-item-period">Mar 30 - Apr 29</div>
          <div className="card-item-amount-row">
            <span className="card-amount-big">S$100</span>
            <span className="card-amount-target">/S$800</span>
            <span className="card-status card-status-behind">BEHIND</span>
          </div>
          <div className="card-progress-bar">
            <div className="card-progress-fill card-progress-behind" style={{ width: "12.5%" }}></div>
          </div>
          <div className="card-days-left">4d left</div>
        </div>

        <div className="card-item card-item-collapsed">The American Express® Tru...</div>
        <div className="card-item card-item-collapsed">Simply Cash Credit Card</div>
      </div>
    </div>
  );
};

const SettingsScreen = () => (
  <div className="app-body settings-body">
    <div className="app-header">
      <div className="app-title">
        <img src="assets/icon.png" alt="" className="app-title-icon" />
        <span>Settings</span>
      </div>
    </div>

    <div className="settings-list">
      <div className="settings-section">
        <div className="settings-label">CURRENCY</div>
        <div className="settings-card">
          <div className="settings-row">
            <span className="settings-row-name">Main currency</span>
            <span className="settings-row-value settings-row-accent">SGD <span className="settings-chev">⇅</span></span>
          </div>
          <div className="settings-divider"></div>
          <div className="settings-row">
            <span className="settings-row-name">Enabled currencies</span>
            <span className="settings-row-value">5 <span className="settings-arrow">›</span></span>
          </div>
        </div>
      </div>

      <div className="settings-section">
        <div className="settings-label">CATEGORIES</div>
        <div className="settings-card">
          <div className="settings-row">
            <span className="settings-row-name">Manage categories</span>
            <span className="settings-arrow">›</span>
          </div>
        </div>
      </div>

      <div className="settings-section">
        <div className="settings-label">AUTOMATION</div>
        <div className="settings-card">
          <div className="settings-row">
            <span className="settings-row-name">How to auto-track</span>
            <span className="settings-row-value">Setup <span className="settings-arrow">›</span></span>
          </div>
          <div className="settings-divider"></div>
          <div className="settings-row">
            <span className="settings-row-name">Troubleshoot auto-tracking</span>
            <span className="settings-row-value">Help <span className="settings-arrow">›</span></span>
          </div>
        </div>
      </div>

      <div className="settings-section">
        <div className="settings-label">DATA</div>
        <div className="settings-card">
          <div className="settings-row">
            <span className="settings-row-name">Import CSV</span>
            <span className="settings-arrow">›</span>
          </div>
          <div className="settings-divider"></div>
          <div className="settings-row">
            <span className="settings-row-name">Export CSV</span>
            <span className="settings-arrow">›</span>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const Phone = ({ scale = 1 }) => {
  const [activeTab, setActiveTab] = React.useState("Home");
  const [tick, setTick] = React.useState(0);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 60);
    return () => clearInterval(id);
  }, []);

  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const animate = (now) => {
      const elapsed = (now - start) / 1000;
      const target = 0.44;
      const eased = Math.min(1, elapsed / 1.6);
      const e = 1 - Math.pow(1 - eased, 3);
      const breath = 0.005 * Math.sin(elapsed * 1.4);
      setProgress(target * e + (eased >= 1 ? breath : 0));
      raf = requestAnimationFrame(animate);
    };
    raf = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(raf);
  }, []);

  const time = `09:${String(37 + Math.floor(tick / 100) % 3).padStart(2, "0")}`;

  const tabs = [
    { name: "Home", icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1V11z" fill="currentColor"/>
      </svg>
    )},
    { name: "Analysis", icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M4 20V10M10 20V4M16 20v-7M22 20H2" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    )},
    { name: "Cards", icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <rect x="2" y="6" width="20" height="13" rx="2" stroke="currentColor" strokeWidth="2"/>
        <path d="M2 10h20" stroke="currentColor" strokeWidth="2"/>
      </svg>
    )},
    { name: "Settings", icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2"/>
        <path d="M12 1v4M12 19v4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M1 12h4M19 12h4M4.2 19.8L7 17M17 7l2.8-2.8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    )},
  ];

  return (
    <div className="phone-wrap" style={{ transform: `scale(${scale})` }}>
      <div className="phone">
        <div className="phone-side phone-side-mute"></div>
        <div className="phone-side phone-side-vol1"></div>
        <div className="phone-side phone-side-vol2"></div>
        <div className="phone-side phone-side-power"></div>

        <div className="phone-screen">
          <div className="status-bar">
            <span className="status-time">{time}</span>
            <div className="island"></div>
            <div className="status-right">
              <svg width="16" height="11" viewBox="0 0 16 11" fill="none">
                <path d="M1 8h2v2H1zM5 6h2v4H5zM9 4h2v6H9zM13 1h2v9h-2z" fill="#fff"/>
              </svg>
              <svg width="14" height="11" viewBox="0 0 14 11" fill="none">
                <path d="M7 2.5C9 2.5 10.8 3.2 12.2 4.4l1.4-1.4C11.8 1.4 9.5.5 7 .5S2.2 1.4.4 3l1.4 1.4C3.2 3.2 5 2.5 7 2.5zM7 5.5c1.2 0 2.3.4 3.2 1.2l1.4-1.4C10.4 4.2 8.7 3.5 7 3.5s-3.4.7-4.6 1.8l1.4 1.4C4.7 5.9 5.8 5.5 7 5.5zM7 8.5c.7 0 1.3.2 1.9.7L7 11l-1.9-1.8c.6-.5 1.2-.7 1.9-.7z" fill="#fff"/>
              </svg>
              <div className="battery"><div className="battery-fill"></div></div>
            </div>
          </div>

          <div className="screen-content" key={activeTab}>
            {activeTab === "Home" && <HomeScreen progress={progress} />}
            {activeTab === "Analysis" && <AnalysisScreen />}
            {activeTab === "Cards" && <CardsScreen />}
            {activeTab === "Settings" && <SettingsScreen />}
          </div>

          <div className="tab-bar">
            {tabs.map((t) => (
              <button
                key={t.name}
                className={`tab ${activeTab === t.name ? "tab-active" : ""}`}
                onClick={() => setActiveTab(t.name)}
              >
                {t.icon}
                <span>{t.name}</span>
              </button>
            ))}
          </div>

          <div className="home-indicator"></div>
        </div>
      </div>
    </div>
  );
};

window.Phone = Phone;