"use client";

import { useState } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
// import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { Settings, Save, RotateCcw } from "lucide-react";
import { useSystemSettings, useUpdateSystemSettings } from "@/hooks";

export default function SettingsPage() {
  const [formData, setFormData] = useState({
    maxAudioDuration: 0,
    maxFileSize: 0,
    maxTagsPerPost: 0,
    maxPostsPerDay: 0,
    autoModerationEnabled: false,
    contentFilteringEnabled: false,
    maintenanceMode: false,
    maintenanceMessage: "",
    emailNotificationsEnabled: false,
    pushNotificationsEnabled: false,
    maxCommunityMembers: 0,
    maxCommunitiesPerUser: 0,
    ageRestriction: 0,
  });

  // Fetch system settings
  const { data: systemSettings, isLoading: settingsLoading } =
    useSystemSettings();

  // Settings mutations
  const updateSystemSettingsMutation = useUpdateSystemSettings();

  // Update form data when settings are loaded
  useState(() => {
    if (systemSettings) {
      setFormData({
        maxAudioDuration: systemSettings.maxAudioDuration || 0,
        maxFileSize: systemSettings.maxFileSize || 0,
        maxTagsPerPost: systemSettings.maxTagsPerPost || 0,
        maxPostsPerDay: systemSettings.maxPostsPerDay || 0,
        autoModerationEnabled: systemSettings.autoModerationEnabled || false,
        contentFilteringEnabled:
          systemSettings.contentFilteringEnabled || false,
        maintenanceMode: systemSettings.maintenanceMode || false,
        maintenanceMessage: systemSettings.maintenanceMessage || "",
        emailNotificationsEnabled:
          systemSettings.emailNotificationsEnabled || false,
        pushNotificationsEnabled:
          systemSettings.pushNotificationsEnabled || false,
        maxCommunityMembers: systemSettings.maxCommunityMembers || 0,
        maxCommunitiesPerUser: systemSettings.maxCommunitiesPerUser || 0,
        ageRestriction: systemSettings.ageRestriction || 0,
      });
    }
  });

  const handleInputChange = (
    field: string,
    value: string | boolean | number
  ) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  const handleSaveSettings = async () => {
    try {
      await updateSystemSettingsMutation.mutateAsync(formData);
    } catch (error) {
      console.error("Failed to save settings:", error);
    }
  };

  const handleResetSettings = () => {
    if (systemSettings) {
      setFormData({
        maxAudioDuration: systemSettings.maxAudioDuration || 0,
        maxFileSize: systemSettings.maxFileSize || 0,
        maxTagsPerPost: systemSettings.maxTagsPerPost || 0,
        maxPostsPerDay: systemSettings.maxPostsPerDay || 0,
        autoModerationEnabled: systemSettings.autoModerationEnabled || false,
        contentFilteringEnabled:
          systemSettings.contentFilteringEnabled || false,
        maintenanceMode: systemSettings.maintenanceMode || false,
        maintenanceMessage: systemSettings.maintenanceMessage || "",
        emailNotificationsEnabled:
          systemSettings.emailNotificationsEnabled || false,
        pushNotificationsEnabled:
          systemSettings.pushNotificationsEnabled || false,
        maxCommunityMembers: systemSettings.maxCommunityMembers || 0,
        maxCommunitiesPerUser: systemSettings.maxCommunitiesPerUser || 0,
        ageRestriction: systemSettings.ageRestriction || 0,
      });
    }
  };

  return (
    <div className="flex-1 space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">System Settings</h1>
          <p className="text-muted-foreground">
            Configure platform-wide settings and preferences
          </p>
        </div>
        <div className="flex space-x-2">
          <Button
            variant="outline"
            onClick={handleResetSettings}
            disabled={settingsLoading}
          >
            <RotateCcw className="h-4 w-4 mr-2" />
            Reset
          </Button>
          <Button
            onClick={handleSaveSettings}
            disabled={updateSystemSettingsMutation.isPending || settingsLoading}
          >
            <Save className="h-4 w-4 mr-2" />
            {updateSystemSettingsMutation.isPending
              ? "Saving..."
              : "Save Settings"}
          </Button>
        </div>
      </div>

      {settingsLoading ? (
        <div className="space-y-4">
          {[...Array(6)].map((_, i) => (
            <Card key={i}>
              <CardHeader>
                <div className="h-6 bg-gray-200 rounded w-1/3 animate-pulse"></div>
                <div className="h-4 bg-gray-200 rounded w-1/2 animate-pulse"></div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {[...Array(3)].map((_, j) => (
                    <div key={j} className="space-y-2">
                      <div className="h-4 bg-gray-200 rounded w-1/4 animate-pulse"></div>
                      <div className="h-10 bg-gray-200 rounded animate-pulse"></div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      ) : (
        <div className="space-y-6">
          {/* Content Settings */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Settings className="h-5 w-5 mr-2" />
                Content Settings
              </CardTitle>
              <CardDescription>
                Configure content creation and upload limits
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="maxAudioDuration">
                    Max Audio Duration (seconds)
                  </Label>
                  <Input
                    id="maxAudioDuration"
                    type="number"
                    value={formData.maxAudioDuration}
                    onChange={(e) =>
                      handleInputChange(
                        "maxAudioDuration",
                        parseInt(e.target.value) || 0
                      )
                    }
                    className="w-full"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="maxFileSize">Max File Size (bytes)</Label>
                  <Input
                    id="maxFileSize"
                    type="number"
                    value={formData.maxFileSize}
                    onChange={(e) =>
                      handleInputChange(
                        "maxFileSize",
                        parseInt(e.target.value) || 0
                      )
                    }
                    className="w-full"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="maxTagsPerPost">Max Tags Per Post</Label>
                  <Input
                    id="maxTagsPerPost"
                    type="number"
                    value={formData.maxTagsPerPost}
                    onChange={(e) =>
                      handleInputChange(
                        "maxTagsPerPost",
                        parseInt(e.target.value) || 0
                      )
                    }
                    className="w-full"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="maxPostsPerDay">Max Posts Per Day</Label>
                  <Input
                    id="maxPostsPerDay"
                    type="number"
                    value={formData.maxPostsPerDay}
                    onChange={(e) =>
                      handleInputChange(
                        "maxPostsPerDay",
                        parseInt(e.target.value) || 0
                      )
                    }
                    className="w-full"
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Moderation Settings */}
          <Card>
            <CardHeader>
              <CardTitle>Moderation Settings</CardTitle>
              <CardDescription>
                Configure content moderation and filtering
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="autoModeration">
                      Enable Auto Moderation
                    </Label>
                    <p className="text-sm text-muted-foreground">
                      Automatically moderate content using AI
                    </p>
                  </div>
                  <Switch
                    id="autoModeration"
                    checked={formData.autoModerationEnabled}
                    onCheckedChange={(checked) =>
                      handleInputChange("autoModerationEnabled", checked)
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="contentFiltering">
                      Enable Content Filtering
                    </Label>
                    <p className="text-sm text-muted-foreground">
                      Filter inappropriate content automatically
                    </p>
                  </div>
                  <Switch
                    id="contentFiltering"
                    checked={formData.contentFilteringEnabled}
                    onCheckedChange={(checked) =>
                      handleInputChange("contentFilteringEnabled", checked)
                    }
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Maintenance Settings */}
          <Card>
            <CardHeader>
              <CardTitle>Maintenance Settings</CardTitle>
              <CardDescription>
                Configure maintenance mode and messages
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="maintenanceMode">Maintenance Mode</Label>
                    <p className="text-sm text-muted-foreground">
                      Enable maintenance mode to restrict access
                    </p>
                  </div>
                  <Switch
                    id="maintenanceMode"
                    checked={formData.maintenanceMode}
                    onCheckedChange={(checked) =>
                      handleInputChange("maintenanceMode", checked)
                    }
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="maintenanceMessage">
                    Maintenance Message
                  </Label>
                  <Input
                    id="maintenanceMessage"
                    value={formData.maintenanceMessage}
                    onChange={(e) =>
                      handleInputChange("maintenanceMessage", e.target.value)
                    }
                    placeholder="System is under maintenance..."
                    className="w-full"
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Notification Settings */}
          <Card>
            <CardHeader>
              <CardTitle>Notification Settings</CardTitle>
              <CardDescription>
                Configure notification preferences
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="emailNotifications">
                      Email Notifications
                    </Label>
                    <p className="text-sm text-muted-foreground">
                      Enable email notifications for users
                    </p>
                  </div>
                  <Switch
                    id="emailNotifications"
                    checked={formData.emailNotificationsEnabled}
                    onCheckedChange={(checked) =>
                      handleInputChange("emailNotificationsEnabled", checked)
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label htmlFor="pushNotifications">
                      Push Notifications
                    </Label>
                    <p className="text-sm text-muted-foreground">
                      Enable push notifications for mobile apps
                    </p>
                  </div>
                  <Switch
                    id="pushNotifications"
                    checked={formData.pushNotificationsEnabled}
                    onCheckedChange={(checked) =>
                      handleInputChange("pushNotificationsEnabled", checked)
                    }
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Community Settings */}
          <Card>
            <CardHeader>
              <CardTitle>Community Settings</CardTitle>
              <CardDescription>
                Configure community limits and restrictions
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="maxCommunityMembers">
                    Max Community Members
                  </Label>
                  <Input
                    id="maxCommunityMembers"
                    type="number"
                    value={formData.maxCommunityMembers}
                    onChange={(e) =>
                      handleInputChange(
                        "maxCommunityMembers",
                        parseInt(e.target.value) || 0
                      )
                    }
                    className="w-full"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="maxCommunitiesPerUser">
                    Max Communities Per User
                  </Label>
                  <Input
                    id="maxCommunitiesPerUser"
                    type="number"
                    value={formData.maxCommunitiesPerUser}
                    onChange={(e) =>
                      handleInputChange(
                        "maxCommunitiesPerUser",
                        parseInt(e.target.value) || 0
                      )
                    }
                    className="w-full"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="ageRestriction">
                    Age Restriction (years)
                  </Label>
                  <Input
                    id="ageRestriction"
                    type="number"
                    value={formData.ageRestriction}
                    onChange={(e) =>
                      handleInputChange(
                        "ageRestriction",
                        parseInt(e.target.value) || 0
                      )
                    }
                    className="w-full"
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}