"use client";

import { ArrowLeft, Key, Shield, User } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useId, useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useToast } from "@/hooks/use-toast";

// Platform session hook - same as in dashboard
function usePlatformSession() {
  const [session, setSession] = useState<{
    user: {
      id: string;
      email: string;
      name?: string;
      role: string;
      companyId?: string;
      isPlatformUser?: boolean;
      platformRole?: string;
    };
  } | null>(null);
  const [status, setStatus] = useState<
    "loading" | "authenticated" | "unauthenticated"
  >("loading");

  useEffect(() => {
    const abortController = new AbortController();

    const handleAuthSuccess = (sessionData: {
      user?: { isPlatformUser?: boolean };
    }) => {
      if (sessionData?.user?.isPlatformUser) {
        setSession(sessionData as any);
        setStatus("authenticated");
      } else {
        handleAuthFailure();
      }
    };

    const handleAuthFailure = (error?: unknown) => {
      if (error instanceof Error && error.name === "AbortError") return;
      if (error) console.error("Platform session fetch error:", error);
      setSession(null);
      setStatus("unauthenticated");
    };

    const fetchSession = async () => {
      try {
        const response = await fetch("/api/platform/auth/session", {
          signal: abortController.signal,
        });

        if (!response.ok) {
          if (response.status === 401) return handleAuthFailure();
          throw new Error(`Failed to fetch session: ${response.status}`);
        }

        const sessionData = await response.json();
        handleAuthSuccess(sessionData);
      } catch (error) {
        handleAuthFailure(error);
      }
    };

    fetchSession();

    return () => {
      abortController.abort();
    };
  }, []);

  return { data: session, status };
}

export default function PlatformSettings() {
  const { data: session, status } = usePlatformSession();
  const router = useRouter();
  const { toast } = useToast();
  const [isLoading, setIsLoading] = useState(false);

  // Generate unique IDs for form elements
  const nameId = useId();
  const emailId = useId();
  const currentPasswordId = useId();
  const newPasswordId = useId();
  const confirmPasswordId = useId();
  const [profileData, setProfileData] = useState({
    name: "",
    email: "",
  });
  const [passwordData, setPasswordData] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  });

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/platform/login");
    }
  }, [status, router]);

  useEffect(() => {
    if (session?.user) {
      setProfileData({
        name: session.user.name || "",
        email: session.user.email || "",
      });
    }
  }, [session]);

  const handleProfileUpdate = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      // TODO: Implement profile update API endpoint
      toast({
        title: "Profile Updated",
        description: "Your profile has been updated successfully.",
      });
    } catch (_error) {
      toast({
        title: "Error",
        description: "Failed to update profile. Please try again.",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handlePasswordChange = async (e: React.FormEvent) => {
    e.preventDefault();

    if (passwordData.newPassword !== passwordData.confirmPassword) {
      toast({
        title: "Error",
        description: "New passwords do not match.",
        variant: "destructive",
      });
      return;
    }

    if (passwordData.newPassword.length < 12) {
      toast({
        title: "Error",
        description: "Password must be at least 12 characters long.",
        variant: "destructive",
      });
      return;
    }

    setIsLoading(true);

    try {
      // TODO: Implement password change API endpoint
      toast({
        title: "Password Changed",
        description: "Your password has been changed successfully.",
      });
      setPasswordData({
        currentPassword: "",
        newPassword: "",
        confirmPassword: "",
      });
    } catch (_error) {
      toast({
        title: "Error",
        description: "Failed to change password. Please try again.",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  if (status === "loading") {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto" />
          <p className="mt-4 text-muted-foreground">Loading...</p>
        </div>
      </div>
    );
  }

  if (!session?.user?.isPlatformUser) {
    return null;
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="border-b bg-white dark:bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-6">
            <div className="flex items-center gap-4">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => router.push("/platform/dashboard")}
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                Back to Dashboard
              </Button>
              <div>
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                  Platform Settings
                </h1>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Manage your platform account settings
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <Tabs defaultValue="profile" className="space-y-6">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="profile">
              <User className="w-4 h-4 mr-2" />
              Profile
            </TabsTrigger>
            <TabsTrigger value="security">
              <Key className="w-4 h-4 mr-2" />
              Security
            </TabsTrigger>
            <TabsTrigger value="advanced">
              <Shield className="w-4 h-4 mr-2" />
              Advanced
            </TabsTrigger>
          </TabsList>

          <TabsContent value="profile" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Profile Information</CardTitle>
                <CardDescription>
                  Update your platform account profile
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleProfileUpdate} className="space-y-4">
                  <div>
                    <Label htmlFor={nameId}>Name</Label>
                    <Input
                      id={nameId}
                      value={profileData.name}
                      onChange={(e) =>
                        setProfileData({ ...profileData, name: e.target.value })
                      }
                      placeholder="Your name"
                    />
                  </div>
                  <div>
                    <Label htmlFor={emailId}>Email</Label>
                    <Input
                      id={emailId}
                      type="email"
                      value={profileData.email}
                      disabled
                      className="bg-gray-50"
                    />
                    <p className="text-sm text-muted-foreground mt-1">
                      Email cannot be changed
                    </p>
                  </div>
                  <div>
                    <Label>Role</Label>
                    <Input
                      value={session.user.platformRole || "N/A"}
                      disabled
                      className="bg-gray-50"
                    />
                  </div>
                  <Button type="submit" disabled={isLoading}>
                    {isLoading ? "Saving..." : "Save Changes"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="security" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Change Password</CardTitle>
                <CardDescription>
                  Update your platform account password
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handlePasswordChange} className="space-y-4">
                  <div>
                    <Label htmlFor={currentPasswordId}>Current Password</Label>
                    <Input
                      id={currentPasswordId}
                      type="password"
                      value={passwordData.currentPassword}
                      onChange={(e) =>
                        setPasswordData({
                          ...passwordData,
                          currentPassword: e.target.value,
                        })
                      }
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor={newPasswordId}>New Password</Label>
                    <Input
                      id={newPasswordId}
                      type="password"
                      value={passwordData.newPassword}
                      onChange={(e) =>
                        setPasswordData({
                          ...passwordData,
                          newPassword: e.target.value,
                        })
                      }
                      required
                    />
                    <p className="text-sm text-muted-foreground mt-1">
                      Must be at least 12 characters long
                    </p>
                  </div>
                  <div>
                    <Label htmlFor={confirmPasswordId}>
                      Confirm New Password
                    </Label>
                    <Input
                      id={confirmPasswordId}
                      type="password"
                      value={passwordData.confirmPassword}
                      onChange={(e) =>
                        setPasswordData({
                          ...passwordData,
                          confirmPassword: e.target.value,
                        })
                      }
                      required
                    />
                  </div>
                  <Button type="submit" disabled={isLoading}>
                    {isLoading ? "Changing..." : "Change Password"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="advanced" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Advanced Settings</CardTitle>
                <CardDescription>
                  Platform administration options
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="rounded-lg border p-4">
                  <h3 className="font-medium mb-2">Platform Role</h3>
                  <p className="text-sm text-muted-foreground">
                    You are logged in as a{" "}
                    <strong>
                      {session.user.platformRole || "Platform User"}
                    </strong>
                  </p>
                </div>

                <div className="rounded-lg border p-4">
                  <h3 className="font-medium mb-2">Session Information</h3>
                  <div className="space-y-1 text-sm text-muted-foreground">
                    <p>User ID: {session.user.id}</p>
                    <p>Session Type: Platform</p>
                  </div>
                </div>

                {session.user.platformRole === "SUPER_ADMIN" && (
                  <div className="rounded-lg border border-red-200 bg-red-50 p-4">
                    <h3 className="font-medium mb-2 text-red-900">
                      Super Admin Options
                    </h3>
                    <p className="text-sm text-red-700 mb-3">
                      Advanced administrative options are available in the
                      individual company management pages.
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}
