"use client";

import { useState } from "react";
import { PageHeader } from "@/components/shared/page-header";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { LoadingSpinner } from "@/components/ui/loading";
import {
  Palette,
  Bell,
  Shield,
  Globe,
  Save,
  CheckCircle,
  Mail,
  Smartphone,
  MessageSquare,
  Trophy,
  GraduationCap,
  CheckSquare,
  CalendarDays,
  Clock,
} from "lucide-react";

// Mock settings - in production these would come from an API
const defaultSettings = {
  branding: {
    appName: "EngageHub",
    primaryColor: "#7C3AED",
    logoUrl: "",
  },
  notifications: {
    emailEnabled: true,
    pushEnabled: true,
    smsEnabled: false,
  },
  features: {
    messagingEnabled: true,
    gamificationEnabled: true,
    coursesEnabled: true,
    pollsEnabled: true,
    tasksEnabled: true,
  },
  tasks: {
    enabled: true,
    allowRecurring: true,
    deadlineReminderHours: 24,
    overdueReminderEnabled: true,
    completionPoints: 15,
    creationPoints: 5,
  },
  security: {
    requireApproval: true,
    sessionTimeout: 30,
    mfaEnabled: false,
  },
};

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState("branding");
  const [settings, setSettings] = useState(defaultSettings);
  const [isSaving, setIsSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const handleSave = async () => {
    setIsSaving(true);
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setIsSaving(false);
    setSaved(true);
    setTimeout(() => setSaved(false), 3000);
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Settings"
        description="Configure your EngageHub platform"
      >
        <Button onClick={handleSave} disabled={isSaving}>
          {isSaving ? (
            <>
              <LoadingSpinner size="sm" className="mr-2" />
              Saving...
            </>
          ) : saved ? (
            <>
              <CheckCircle className="mr-2 h-4 w-4 text-success" />
              Saved
            </>
          ) : (
            <>
              <Save className="mr-2 h-4 w-4" />
              Save Changes
            </>
          )}
        </Button>
      </PageHeader>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="branding" className="gap-2">
            <Palette className="h-4 w-4" />
            <span className="hidden sm:inline">Branding</span>
          </TabsTrigger>
          <TabsTrigger value="notifications" className="gap-2">
            <Bell className="h-4 w-4" />
            <span className="hidden sm:inline">Notifications</span>
          </TabsTrigger>
          <TabsTrigger value="features" className="gap-2">
            <Globe className="h-4 w-4" />
            <span className="hidden sm:inline">Features</span>
          </TabsTrigger>
          <TabsTrigger value="tasks" className="gap-2">
            <CheckSquare className="h-4 w-4" />
            <span className="hidden sm:inline">Tasks</span>
          </TabsTrigger>
          <TabsTrigger value="security" className="gap-2">
            <Shield className="h-4 w-4" />
            <span className="hidden sm:inline">Security</span>
          </TabsTrigger>
        </TabsList>

        {/* Branding Settings */}
        <TabsContent value="branding" className="mt-6 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>App Branding</CardTitle>
              <CardDescription>
                Customize the look and feel of your platform
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <label className="text-sm font-medium">App Name</label>
                <Input
                  value={settings.branding.appName}
                  onChange={(e) =>
                    setSettings({
                      ...settings,
                      branding: { ...settings.branding, appName: e.target.value },
                    })
                  }
                  placeholder="Your App Name"
                />
              </div>
              <div>
                <label className="text-sm font-medium">Primary Color</label>
                <div className="flex items-center gap-3">
                  <input
                    type="color"
                    value={settings.branding.primaryColor}
                    onChange={(e) =>
                      setSettings({
                        ...settings,
                        branding: { ...settings.branding, primaryColor: e.target.value },
                      })
                    }
                    className="h-10 w-20 cursor-pointer rounded border"
                  />
                  <Input
                    value={settings.branding.primaryColor}
                    onChange={(e) =>
                      setSettings({
                        ...settings,
                        branding: { ...settings.branding, primaryColor: e.target.value },
                      })
                    }
                    placeholder="#7C3AED"
                    className="w-32"
                  />
                </div>
              </div>
              <div>
                <label className="text-sm font-medium">Logo URL</label>
                <Input
                  value={settings.branding.logoUrl}
                  onChange={(e) =>
                    setSettings({
                      ...settings,
                      branding: { ...settings.branding, logoUrl: e.target.value },
                    })
                  }
                  placeholder="https://example.com/logo.png"
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Notification Settings */}
        <TabsContent value="notifications" className="mt-6 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Notification Channels</CardTitle>
              <CardDescription>
                Configure how users receive notifications
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <Mail className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Email Notifications</p>
                    <p className="text-sm text-muted-foreground">
                      Send notifications via email
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.notifications.emailEnabled ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      notifications: {
                        ...settings.notifications,
                        emailEnabled: !settings.notifications.emailEnabled,
                      },
                    })
                  }
                >
                  {settings.notifications.emailEnabled ? "Enabled" : "Disabled"}
                </Button>
              </div>

              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <Smartphone className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Push Notifications</p>
                    <p className="text-sm text-muted-foreground">
                      Send push notifications to mobile devices
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.notifications.pushEnabled ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      notifications: {
                        ...settings.notifications,
                        pushEnabled: !settings.notifications.pushEnabled,
                      },
                    })
                  }
                >
                  {settings.notifications.pushEnabled ? "Enabled" : "Disabled"}
                </Button>
              </div>

              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <MessageSquare className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">SMS Notifications</p>
                    <p className="text-sm text-muted-foreground">
                      Send notifications via SMS (additional charges may apply)
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.notifications.smsEnabled ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      notifications: {
                        ...settings.notifications,
                        smsEnabled: !settings.notifications.smsEnabled,
                      },
                    })
                  }
                >
                  {settings.notifications.smsEnabled ? "Enabled" : "Disabled"}
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Feature Toggles */}
        <TabsContent value="features" className="mt-6 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Feature Toggles</CardTitle>
              <CardDescription>
                Enable or disable platform features
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <MessageSquare className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Messaging</p>
                    <p className="text-sm text-muted-foreground">
                      Real-time chat between users
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.features.messagingEnabled ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      features: {
                        ...settings.features,
                        messagingEnabled: !settings.features.messagingEnabled,
                      },
                    })
                  }
                >
                  {settings.features.messagingEnabled ? "Enabled" : "Disabled"}
                </Button>
              </div>

              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <Trophy className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Gamification</p>
                    <p className="text-sm text-muted-foreground">
                      Points, badges, and leaderboards
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.features.gamificationEnabled ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      features: {
                        ...settings.features,
                        gamificationEnabled: !settings.features.gamificationEnabled,
                      },
                    })
                  }
                >
                  {settings.features.gamificationEnabled ? "Enabled" : "Disabled"}
                </Button>
              </div>

              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <GraduationCap className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">E-Learning</p>
                    <p className="text-sm text-muted-foreground">
                      Courses and learning management
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.features.coursesEnabled ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      features: {
                        ...settings.features,
                        coursesEnabled: !settings.features.coursesEnabled,
                      },
                    })
                  }
                >
                  {settings.features.coursesEnabled ? "Enabled" : "Disabled"}
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Tasks Settings */}
        <TabsContent value="tasks" className="mt-6 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Task Management Settings</CardTitle>
              <CardDescription>
                Configure task management features and behavior
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <CheckSquare className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Enable Tasks</p>
                    <p className="text-sm text-muted-foreground">
                      Allow users to create and manage tasks
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.tasks.enabled ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      tasks: {
                        ...settings.tasks,
                        enabled: !settings.tasks.enabled,
                      },
                    })
                  }
                >
                  {settings.tasks.enabled ? "Enabled" : "Disabled"}
                </Button>
              </div>

              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <CalendarDays className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Allow Recurring Tasks</p>
                    <p className="text-sm text-muted-foreground">
                      Enable users to create recurring tasks
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.tasks.allowRecurring ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      tasks: {
                        ...settings.tasks,
                        allowRecurring: !settings.tasks.allowRecurring,
                      },
                    })
                  }
                  disabled={!settings.tasks.enabled}
                >
                  {settings.tasks.allowRecurring ? "Enabled" : "Disabled"}
                </Button>
              </div>

              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div className="flex items-center gap-3">
                  <Bell className="h-5 w-5 text-muted-foreground" />
                  <div>
                    <p className="font-medium">Overdue Notifications</p>
                    <p className="text-sm text-muted-foreground">
                      Send notifications for overdue tasks
                    </p>
                  </div>
                </div>
                <Button
                  variant={settings.tasks.overdueReminderEnabled ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      tasks: {
                        ...settings.tasks,
                        overdueReminderEnabled: !settings.tasks.overdueReminderEnabled,
                      },
                    })
                  }
                  disabled={!settings.tasks.enabled}
                >
                  {settings.tasks.overdueReminderEnabled ? "Enabled" : "Disabled"}
                </Button>
              </div>

              <div className="p-4 rounded-lg border">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <Clock className="h-5 w-5 text-muted-foreground" />
                    <div>
                      <p className="font-medium">Deadline Reminder</p>
                      <p className="text-sm text-muted-foreground">
                        Hours before deadline to send reminders
                      </p>
                    </div>
                  </div>
                </div>
                <Input
                  type="number"
                  value={settings.tasks.deadlineReminderHours}
                  onChange={(e) =>
                    setSettings({
                      ...settings,
                      tasks: {
                        ...settings.tasks,
                        deadlineReminderHours: parseInt(e.target.value) || 24,
                      },
                    })
                  }
                  className="w-32"
                  min={1}
                  max={168}
                  disabled={!settings.tasks.enabled}
                />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Task Point Values</CardTitle>
              <CardDescription>
                Configure points awarded for task-related actions
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="p-4 rounded-lg border">
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <p className="font-medium">Task Completion Points</p>
                    <p className="text-sm text-muted-foreground">
                      Points awarded when a task is completed
                    </p>
                  </div>
                </div>
                <Input
                  type="number"
                  value={settings.tasks.completionPoints}
                  onChange={(e) =>
                    setSettings({
                      ...settings,
                      tasks: {
                        ...settings.tasks,
                        completionPoints: parseInt(e.target.value) || 15,
                      },
                    })
                  }
                  className="w-32"
                  min={0}
                  max={100}
                  disabled={!settings.tasks.enabled}
                />
              </div>

              <div className="p-4 rounded-lg border">
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <p className="font-medium">Task Creation Points</p>
                    <p className="text-sm text-muted-foreground">
                      Points awarded when a user creates a task
                    </p>
                  </div>
                </div>
                <Input
                  type="number"
                  value={settings.tasks.creationPoints}
                  onChange={(e) =>
                    setSettings({
                      ...settings,
                      tasks: {
                        ...settings.tasks,
                        creationPoints: parseInt(e.target.value) || 5,
                      },
                    })
                  }
                  className="w-32"
                  min={0}
                  max={50}
                  disabled={!settings.tasks.enabled}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Security Settings */}
        <TabsContent value="security" className="mt-6 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Security Settings</CardTitle>
              <CardDescription>
                Configure security and access controls
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div>
                  <p className="font-medium">Require Admin Approval</p>
                  <p className="text-sm text-muted-foreground">
                    New users must be approved before accessing the platform
                  </p>
                </div>
                <Button
                  variant={settings.security.requireApproval ? "default" : "outline"}
                  onClick={() =>
                    setSettings({
                      ...settings,
                      security: {
                        ...settings.security,
                        requireApproval: !settings.security.requireApproval,
                      },
                    })
                  }
                >
                  {settings.security.requireApproval ? "Enabled" : "Disabled"}
                </Button>
              </div>

              <div className="p-4 rounded-lg border">
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <p className="font-medium">Session Timeout</p>
                    <p className="text-sm text-muted-foreground">
                      Auto-logout after inactivity (minutes)
                    </p>
                  </div>
                </div>
                <Input
                  type="number"
                  value={settings.security.sessionTimeout}
                  onChange={(e) =>
                    setSettings({
                      ...settings,
                      security: {
                        ...settings.security,
                        sessionTimeout: parseInt(e.target.value) || 30,
                      },
                    })
                  }
                  className="w-32"
                  min={5}
                  max={120}
                />
              </div>

              <div className="flex items-center justify-between p-4 rounded-lg border">
                <div>
                  <p className="font-medium">Two-Factor Authentication</p>
                  <p className="text-sm text-muted-foreground">
                    Require 2FA for admin accounts
                  </p>
                  <Badge variant="outline" className="mt-2">Coming Soon</Badge>
                </div>
                <Button variant="outline" disabled>
                  Disabled
                </Button>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Environment Info</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">API URL</span>
                  <code className="bg-muted px-2 py-1 rounded">
                    {process.env.NEXT_PUBLIC_API_URL || "Not configured"}
                  </code>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Environment</span>
                  <Badge variant="outline">
                    {process.env.NODE_ENV || "development"}
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}