'use client';

import { useState } from 'react';
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Input,
  Switch,
  Badge,
  Alert,
  BrandInitializer,
} from 'stride-ds';
import 'stride-ds/styles';

export default function ProfilePage() {
  const [emailNotifications, setEmailNotifications] = useState(true);
  const [fullName, setFullName] = useState('');
  const [email, setEmail] = useState('');
  const [bio, setBio] = useState('');
  const [saved, setSaved] = useState(false);

  const handleSave = () => {
    // Validate and save logic here
    setSaved(true);
    setTimeout(() => setSaved(false), 3000);
  };

  return (
    <>
      <BrandInitializer brand="stride" />
      
      <main className="min-h-screen bg-[var(--bg-secondary)] p-8">
        <div className="max-w-2xl mx-auto space-y-6">
          <div>
            <h1 className="text-3xl font-bold text-[var(--text-primary)]">
              Account Settings
            </h1>
            <p className="text-[var(--text-secondary)] mt-2">
              Manage your profile and notification preferences
            </p>
          </div>

          {saved && (
            <Alert variant="success" title="Success">
              Your profile has been updated successfully.
            </Alert>
          )}

          <Card variant="elevated">
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>User Profile</CardTitle>
                <Badge variant="success">Active</Badge>
              </div>
              <CardDescription>
                Update your profile information and preferences
              </CardDescription>
            </CardHeader>

            <CardContent className="space-y-4">
              <Input
                label="Full Name"
                placeholder="Enter your name"
                value={fullName}
                onChange={(e) => setFullName(e.target.value)}
                isRequired
              />

              <Input
                label="Email Address"
                type="email"
                placeholder="[email protected]"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                isRequired
              />

              <Input
                label="Bio"
                placeholder="Tell us about yourself"
                value={bio}
                onChange={(e) => setBio(e.target.value)}
                helperText="Optional - shown on your public profile"
              />

              <div className="border-t border-[var(--border-primary)] pt-4" />

              <div className="flex items-center justify-between py-2">
                <div>
                  <label className="font-medium text-sm text-[var(--text-primary)]">
                    Email Notifications
                  </label>
                  <p className="text-xs text-[var(--text-secondary)] mt-1">
                    Receive updates about your account activity
                  </p>
                </div>
                <Switch
                  isSelected={emailNotifications}
                  onChange={setEmailNotifications}
                  aria-label="Toggle email notifications"
                />
              </div>
            </CardContent>

            <CardFooter>
              <Button variant="secondary" onPress={() => window.history.back()}>
                Cancel
              </Button>
              <Button 
                variant="primary" 
                onPress={handleSave}
                isDisabled={!fullName || !email}
              >
                Save Changes
              </Button>
            </CardFooter>
          </Card>
        </div>
      </main>
    </>
  );
}

'use client';

import { useState } from 'react';
import { applyBrandTheme } from 'stride-ds';
import { Button } from 'stride-ds';

export function BrandSwitcher() {
  const [currentBrand, setCurrentBrand] = useState('stride');

  const brands = [
    { id: 'stride', name: 'Stride', color: 'blue' },
    { id: 'coral', name: 'Coral', color: 'orange' },
    { id: 'forest', name: 'Forest', color: 'green' },
    { id: 'runswap', name: 'Runswap', color: 'purple' },
    { id: 'acme', name: 'Acme', color: 'indigo' },
  ];

  const switchBrand = (brandId: string) => {
    applyBrandTheme(brandId);
    setCurrentBrand(brandId);
  };

  return (
    <div className="flex gap-2">
      {brands.map((brand) => (
        <Button
          key={brand.id}
          variant={currentBrand === brand.id ? 'primary' : 'secondary'}
          size="sm"
          onPress={() => switchBrand(brand.id)}
        >
          {brand.name}
        </Button>
      ))}
    </div>
  );
}