'use client';

import Sidebar from '@/components/Sidebar';
import ErrorToast from '@/components/Error';
import SuccessToast from '@/components/Success';
import { ProfileSettings } from '@/components/cards/settings/ProfileSettings';
import { PasswordSettings } from '@/components/cards/settings/PasswordSettings';
import { NotificationProviderSettings } from '@/components/cards/settings/NotificationProviderSettings';
import { NotificationSettings } from '@/components/cards/settings/NotificationSettings';
import { MonitoringSettings } from '@/components/cards/settings/MonitoringSettings';
import { useState } from 'react';

interface SettingsPageProps {
  username: string;
  name: string;
  email: string;
}

export default function SettingsPage({ username, name, email }: SettingsPageProps) {
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  return (
    <div>
      <Sidebar
        username={username}
        fullName={name}
        breadcrumbPath={['/', 'Dashboard', 'Settings']}
      >
        <main>
          <h1 className="text-2xl font-bold">Settings</h1>
          <p className="text-sm opacity-70">Manage your instance settings</p>

          <div className="tabs tabs-border pt-8">
            <input 
              type="radio" 
              name="settings" 
              className="tab text-primary z-10" 
              aria-label="User Settings" 
              defaultChecked
            />
            <div className="tab-content relative bg-base-100 pl-4 pt-4">
              <div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
                <div className="flex flex-col gap-4">
                <ProfileSettings
                  initialUsername={username}
                  initialName={name}
                  initialEmail={email}
                  onError={setError}
                />
                  <PasswordSettings onError={setError} />
                </div>
            </div>

            <input 
              type="radio" 
              name="settings" 
              className="tab text-primary z-10" 
              aria-label="Notification Settings"
            />
            <div className="tab-content relative bg-base-100 pl-4 pt-4">
              <div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
              <div className="flex flex-col gap-4">
                <NotificationProviderSettings onError={setError} onSuccess={setSuccess} />
                <NotificationSettings onError={setError} onSuccess={setSuccess} />
              </div>
            </div>

            <input 
              type="radio" 
              name="settings" 
              className="tab text-primary z-10" 
              aria-label="Monitoring Settings"
            />
            <div className="tab-content relative bg-base-100 pl-4 pt-4">
              <div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
              <div className="flex flex-col gap-4">
                <MonitoringSettings onError={setError} onSuccess={setSuccess} />
              </div>
            </div>
          </div>
        </main>
      </Sidebar>
      <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
      <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
    </div>
  );
}