import { Bell, Monitor, Palette, ShieldCheck, UserRound } from 'lucide-solid'
import { createSignal } from 'solid-js'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { DataRow } from '@/components/ui/data-row'
import { Input } from '@/components/ui/input'
import { SectionHeading } from '@/components/ui/section-heading'
import { useAuth } from '@/stores/auth-store'
import { useTheme } from '@/stores/theme-store'

export const SettingsPage = () => {
  const auth = useAuth()
  const theme = useTheme()
  const [displayName, setDisplayName] = createSignal(auth.user()?.displayName ?? 'Movie Night Operator')
  const [email, setEmail] = createSignal(auth.user()?.email ?? 'you@seen.local')
  const [saved, setSaved] = createSignal(false)

  const saveProfile = () => {
    setSaved(true)
    setTimeout(() => setSaved(false), 1600)
  }

  return (
    <section class="space-y-6" data-testid="settings-page">
      <Card class="animate-stagger">
        <CardContent class="space-y-6 pt-6">
          <SectionHeading
            eyebrow="Settings"
            title="Profile, interface, and security controls for your personal control center."
            description="Core preferences are kept compact and easy to audit."
            badge={<Badge variant="neutral">User preferences</Badge>}
          />

          <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-2xl border border-border bg-muted/40 p-4">
              <p class="text-xs uppercase tracking-[0.2em] text-muted-fg">Theme</p>
              <p class="mt-2 text-2xl font-semibold text-fg capitalize">{theme.mode()}</p>
            </div>
            <div class="rounded-2xl border border-border bg-muted/40 p-4">
              <p class="text-xs uppercase tracking-[0.2em] text-muted-fg">Role</p>
              <p class="mt-2 text-2xl font-semibold text-fg capitalize">{auth.user()?.role ?? 'user'}</p>
            </div>
            <div class="rounded-2xl border border-border bg-muted/40 p-4">
              <p class="text-xs uppercase tracking-[0.2em] text-muted-fg">Security</p>
              <p class="mt-2 text-2xl font-semibold text-fg">Stable</p>
            </div>
            <div class="rounded-2xl border border-border bg-muted/40 p-4">
              <p class="text-xs uppercase tracking-[0.2em] text-muted-fg">Session</p>
              <p class="mt-2 text-2xl font-semibold text-fg">Active</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <div class="grid gap-6 xl:grid-cols-[minmax(0,1.05fr)_360px]">
        <Card>
          <CardContent class="space-y-5 pt-6">
            <SectionHeading
              title="Profile"
              description="Update the identity shown across activity and sharing surfaces."
              badge={<Badge variant="accent">Editable</Badge>}
            />

            <div class="space-y-3">
              <div class="space-y-2">
                <label class="text-xs uppercase tracking-[0.2em] text-muted-fg">Display name</label>
                <Input value={displayName()} onInput={(event) => setDisplayName(event.currentTarget.value)} />
              </div>

              <div class="space-y-2">
                <label class="text-xs uppercase tracking-[0.2em] text-muted-fg">Email</label>
                <Input value={email()} onInput={(event) => setEmail(event.currentTarget.value)} />
              </div>

              <div class="flex items-center gap-2">
                <Button size="sm" variant="primary" onClick={saveProfile}>
                  Save profile
                </Button>
                <Button size="sm" variant="secondary">
                  Reset
                </Button>
                {saved() ? <span class="text-xs text-accent">Saved</span> : null}
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent class="space-y-5 pt-6">
            <SectionHeading
              title="Preferences"
              description="Theme and surface behavior controls."
              badge={<Badge variant="secondary">Runtime</Badge>}
            />
            <div class="space-y-3">
              <DataRow
                tone="neutral"
                eyebrow="Theme mode"
                title="Appearance"
                description="Dark mode is primary, light/system remain available."
                meta={`Current: ${theme.mode()}`}
                trailing={<Palette class="h-4 w-4" />}
              />
              <DataRow
                tone="accent"
                eyebrow="Playback"
                title="Default behavior"
                description="Resume and autoplay preferences can be surfaced here."
                trailing={<Monitor class="h-4 w-4" />}
              />
              <DataRow
                tone="secondary"
                eyebrow="Notifications"
                title="Release and download alerts"
                description="Notification channels can be connected as backend support expands."
                trailing={<Bell class="h-4 w-4" />}
              />
            </div>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardContent class="space-y-5 pt-6">
          <SectionHeading
            title="Security"
            description="Account and session posture."
            badge={<Badge variant="neutral">Read model</Badge>}
          />
          <div class="space-y-3">
            <DataRow
              tone="accent"
              eyebrow="Authentication"
              title="Session token strategy active"
              description="Access token + refresh flow is currently enabled."
              trailing={<ShieldCheck class="h-4 w-4" />}
            />
            <DataRow
              tone="neutral"
              eyebrow="Identity"
              title={displayName()}
              description={email()}
              trailing={<UserRound class="h-4 w-4" />}
            />
          </div>
        </CardContent>
      </Card>
    </section>
  )
}
