import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { 
  Settings as SettingsIcon, 
  Bell, 
  Shield,
  Palette,
  Lock,
  Calendar,
  Sliders,
  AlertCircle
} from 'lucide-react';
import { setupPushNotifications } from '@/utils/pushNotifications';
import { useAuth } from '@/contexts/AuthContext';
import { ConfigurationManager } from '@/components/admin/ConfigurationManager';
import { HolidayManager } from '@/components/admin/HolidayManager';

export function Settings() {
  const { user } = useAuth();
  return (
    <div className="space-y-6 max-w-7xl mx-auto">
      {/* Header Card */}
      <Card className="relative overflow-hidden shadow-xl border-0">
        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
        
        <CardContent className="relative z-10 p-8 lg:p-12">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
            <div className="text-white">
              <div className="flex items-center gap-4 mb-4">
                <div className="w-16 h-16 bg-yellow-400 rounded-xl flex items-center justify-center shadow-lg">
                  <SettingsIcon className="w-8 h-8 text-slate-900" />
                </div>
                <div>
                  <h1 className="text-3xl font-bold mb-2 text-white">Settings</h1>
                  <p className="text-lg text-gray-200">Manage your account settings and preferences</p>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Check if user is admin */}
      {(user as any)?.isAdmin ? (
        <Tabs defaultValue="user" className="w-full">
          <TabsList className="grid w-full grid-cols-3 mb-6">
            <TabsTrigger value="user" className="flex items-center gap-2">
              <SettingsIcon className="w-4 h-4" />
              User Settings
            </TabsTrigger>
            <TabsTrigger value="system" className="flex items-center gap-2">
              <Sliders className="w-4 h-4" />
              System Configuration
            </TabsTrigger>
            <TabsTrigger value="holidays" className="flex items-center gap-2">
              <Calendar className="w-4 h-4" />
              Holiday Calendar
            </TabsTrigger>
          </TabsList>

          {/* User Settings Tab */}
          <TabsContent value="user" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Notification Settings */}
              <Card className="shadow-lg hover:shadow-xl transition-shadow">
                <CardHeader className="pb-4">
                  <div className="flex items-center gap-3">
                    <div className="p-3 bg-blue-100 rounded-lg">
                      <Bell className="h-5 w-5 text-blue-600" />
                    </div>
                    <div>
                      <CardTitle className="text-lg text-gray-900">Notifications</CardTitle>
                      <CardDescription className="text-gray-600">Manage notification preferences</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <Button onClick={async () => { 
                      try { 
                        await setupPushNotifications(); 
                        alert('Notifications enabled'); 
                      } catch (e) { 
                        alert('Failed to enable notifications'); 
                      } 
                    }}>
                      Enable Push Notifications
                    </Button>
                  </div>
                </CardContent>
              </Card>

              {/* Security Settings */}
              <Card className="shadow-lg hover:shadow-xl transition-shadow">
                <CardHeader className="pb-4">
                  <div className="flex items-center gap-3">
                    <div className="p-3 bg-red-100 rounded-lg">
                      <Lock className="h-5 w-5 text-red-600" />
                    </div>
                    <div>
                      <CardTitle className="text-lg text-gray-900">Security</CardTitle>
                      <CardDescription className="text-gray-600">Password and security settings</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="p-4 bg-gray-50 rounded-lg">
                      <p className="text-sm text-gray-600">Security settings will be available soon</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Appearance Settings */}
              <Card className="shadow-lg hover:shadow-xl transition-shadow">
                <CardHeader className="pb-4">
                  <div className="flex items-center gap-3">
                    <div className="p-3 bg-purple-100 rounded-lg">
                      <Palette className="h-5 w-5 text-purple-600" />
                    </div>
                    <div>
                      <CardTitle className="text-lg text-gray-900">Appearance</CardTitle>
                      <CardDescription className="text-gray-600">Theme and display preferences</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="p-4 bg-gray-50 rounded-lg">
                      <p className="text-sm text-gray-600">Appearance settings will be available soon</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Preferences */}
              <Card className="shadow-lg hover:shadow-xl transition-shadow">
                <CardHeader className="pb-4">
                  <div className="flex items-center gap-3">
                    <div className="p-3 bg-emerald-100 rounded-lg">
                      <Shield className="h-5 w-5 text-emerald-600" />
                    </div>
                    <div>
                      <CardTitle className="text-lg text-gray-900">Preferences</CardTitle>
                      <CardDescription className="text-gray-600">Application preferences</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="p-4 bg-gray-50 rounded-lg">
                      <p className="text-sm text-gray-600">User preferences will be available soon</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* System Configuration Tab (Admin Only) */}
          <TabsContent value="system">
            <ConfigurationManager />
          </TabsContent>

          {/* Holiday Calendar Tab (Admin Only) */}
          <TabsContent value="holidays">
            <HolidayManager />
          </TabsContent>
        </Tabs>
      ) : (
        <>
          {/* Non-Admin User Settings Only */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Notification Settings */}
            <Card className="shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="flex items-center gap-3">
                  <div className="p-3 bg-blue-100 rounded-lg">
                    <Bell className="h-5 w-5 text-blue-600" />
                  </div>
                  <div>
                    <CardTitle className="text-lg text-gray-900">Notifications</CardTitle>
                    <CardDescription className="text-gray-600">Manage notification preferences</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <Button onClick={async () => { 
                    try { 
                      await setupPushNotifications(); 
                      alert('Notifications enabled'); 
                    } catch (e) { 
                      alert('Failed to enable notifications'); 
                    } 
                  }}>
                    Enable Push Notifications
                  </Button>
                </div>
              </CardContent>
            </Card>

            {/* Security Settings */}
            <Card className="shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="flex items-center gap-3">
                  <div className="p-3 bg-red-100 rounded-lg">
                    <Lock className="h-5 w-5 text-red-600" />
                  </div>
                  <div>
                    <CardTitle className="text-lg text-gray-900">Security</CardTitle>
                    <CardDescription className="text-gray-600">Password and security settings</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="p-4 bg-gray-50 rounded-lg">
                    <p className="text-sm text-gray-600">Security settings will be available soon</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Appearance Settings */}
            <Card className="shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="flex items-center gap-3">
                  <div className="p-3 bg-purple-100 rounded-lg">
                    <Palette className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <CardTitle className="text-lg text-gray-900">Appearance</CardTitle>
                    <CardDescription className="text-gray-600">Theme and display preferences</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="p-4 bg-gray-50 rounded-lg">
                    <p className="text-sm text-gray-600">Appearance settings will be available soon</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Preferences */}
            <Card className="shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="flex items-center gap-3">
                  <div className="p-3 bg-emerald-100 rounded-lg">
                    <Shield className="h-5 w-5 text-emerald-600" />
                  </div>
                  <div>
                    <CardTitle className="text-lg text-gray-900">Preferences</CardTitle>
                    <CardDescription className="text-gray-600">Application preferences</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="p-4 bg-gray-50 rounded-lg">
                    <p className="text-sm text-gray-600">User preferences will be available soon</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Info: Admin features not available */}
          <Card className="shadow-lg border-blue-200 bg-blue-50">
            <CardContent className="p-6">
              <div className="flex items-center gap-3">
                <AlertCircle className="w-5 h-5 text-blue-600 shrink-0" />
                <div>
                  <p className="text-sm font-medium text-gray-900">Admin features not accessible</p>
                  <p className="text-xs text-gray-600 mt-1">System configuration and holiday management require admin privileges.</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </>
      )}
    </div>
  );
}