"use client";

import { useState } from "react";
import { APPS, APP_BY_ID } from "./apps";
import Clock from "./Clock";
import { useTheme } from "./useTheme";
import { WALLPAPER } from "../data";

const DOCK_IDS = ["projects", "services", "socials", "contributions"];

export default function AndroidHome() {
  const { theme, toggle } = useTheme();
  const [openId, setOpenId] = useState<string | null>(null);
  const openApp = openId ? APP_BY_ID[openId] : null;

  const renderIcon = (appId: string, inDock = false) => {
    const app = APP_BY_ID[appId];
    if (!app) return null;
    return (
      <button
        key={app.id}
        type="button"
        className={"android-app" + (inDock ? " in-dock" : "")}
        onClick={() => setOpenId(app.id)}
      >
        <span className="android-app-icon" style={{ background: app.color }}>
          {app.icon}
        </span>
        {!inDock && <span className="android-app-label">{app.title}</span>}
      </button>
    );
  };

  return (
    <div className="android-root">
      {openApp ? (
        <div className="android-app-view">
          <header className="android-appbar">
            <button
              type="button"
              className="android-back"
              onClick={() => setOpenId(null)}
              aria-label="Back"
            >
              ←
            </button>
            <span className="android-appbar-title">{openApp.title}</span>
          </header>
          <div className="android-app-body app-surface">{openApp.content}</div>
        </div>
      ) : (
        <div className="android-home" style={{ backgroundImage: `url('${WALLPAPER}')` }}>
          <div className="android-statusbar">
            <span className="android-status-time">
              <Clock />
            </span>
            <span className="android-status-icons" aria-hidden="true">
              ᯤ  ▮
            </span>
          </div>

          <button
            type="button"
            className="android-theme-chip"
            onClick={toggle}
            aria-label={`Switch to ${theme === "skeuo" ? "gruvbox" : "Desktop"} theme`}
          >
            <span aria-hidden="true">🎨</span>
            <span>{theme === "skeuo" ? "Gruvbox" : "Desktop"}</span>
          </button>

          <div className="android-glance">
            <div className="android-glance-time">
              <Clock />
            </div>
            <div className="android-glance-sub">dvorakmortonxd.dev</div>
          </div>

          <div className="android-grid">{APPS.map((app) => renderIcon(app.id))}</div>

          <div className="android-dock">{DOCK_IDS.map((id) => renderIcon(id, true))}</div>

          <div className="android-navbar">
            <span className="android-navbar-pill" />
          </div>
        </div>
      )}
    </div>
  );
}