import { createSignal, createResource } from "solid-js";
import { Title } from "@solidjs/meta";
import { Sidebar, TopBar } from "~/components/dashboard";
import { Button, Card, Input } from "~/components/ui";
import { useAuth, useSubscription } from "~/hooks";
import { api } from "~/lib/api";

export default function SettingsPage() {
  const [sidebarOpen, setSidebarOpen] = createSignal(false);
  const auth = useAuth();
  const subscription = useSubscription();
  const [name, setName] = createSignal(auth.user()?.name ?? "");
  const [saving, setSaving] = createSignal(false);

  async function saveProfile() {
    setSaving(true);
    try {
      await api.user.update.mutate({ name: name() });
    } finally {
      setSaving(false);
    }
  }

  return (
    <div class="flex h-[calc(100vh-4rem)] bg-[var(--color-bg)]">
      <Title>Settings — Kordant</Title>
      <Sidebar open={sidebarOpen()} onClose={() => setSidebarOpen(false)} />
      <div class="flex-1 flex flex-col min-w-0">
        <TopBar onMenuToggle={() => setSidebarOpen(v => !v)} />
        <main id="main-content" class="flex-1 overflow-y-auto p-6">
          <div class="max-w-2xl mx-auto">
            <h1 class="text-2xl font-bold text-[var(--color-text-primary)] mb-6">Settings</h1>

            <Card class="mb-6 p-4">
              <h2 class="text-sm font-semibold text-[var(--color-text-primary)] mb-4">Profile</h2>
              <div class="flex flex-col gap-4">
                <Input
                  label="Name"
                  value={name()}
                  onInput={(e) => setName(e.currentTarget.value)}
                />
                <Input
                  label="Email"
                  value={auth.user()?.email ?? ""}
                  disabled
                />
                <Button onClick={saveProfile} loading={saving()}>
                  Save
                </Button>
              </div>
            </Card>

            <Card class="p-4">
              <h2 class="text-sm font-semibold text-[var(--color-text-primary)] mb-4">Subscription</h2>
              <p class="text-sm text-[var(--color-text-secondary)] mb-1">Current Plan</p>
              <p class="text-lg font-semibold text-[var(--color-text-primary)]">
                {(subscription.tier().charAt(0).toUpperCase() + subscription.tier().slice(1)) || "Free"}
              </p>
            </Card>
          </div>
        </main>
      </div>
    </div>
  );
}