"use client";
import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import * as SwitchPrimitive from "@radix-ui/react-switch";
import {
  AlertCircle,
  ArrowUpRight,
  Bell,
  CreditCard,
  History,
  Laptop,
  Lock,
  Plus,
  RefreshCw,
  Shield,
  Smartphone,
  Tablet,
} from "lucide-react";
import { useState } from "react";

export default function SettingsAccordion() {
  const [switchStates, setSwitchStates] = useState({
    googleDrive: true,
    slack: true,
    dropbox: false,
    camera: true,
    microphone: true,
    location: false,
    background: true,
    notifications: true,
  });

  // Function to toggle a specific switch
  const toggleSwitch = (switchName: keyof typeof switchStates): void => {
    setSwitchStates((prevState) => ({
      ...prevState,
      [switchName]: !prevState[switchName],
    }));
  };

  return (
    <div className="w-full min-h-screen sm:grid py-10 sm:place-content-center mx-auto bg-white rounded-xl shadow-xs">
      <Accordion defaultValue="item-2">
        <AccordionItem
          value="item-0"
          className="border border-neutral-200 sm:w-md w-[95%] mx-auto"
        >
          <AccordionHeader className="hover:no-underline py-2">
            <div className="flex items-center gap-4 w-full">
              <Laptop className="w-5 h-5 text-purple-500" />
              <div className="flex-1 text-left">
                <div className="flex items-center gap-1">
                  <span className="font-medium">Connected Devices</span>
                </div>
                <p className="text-sm text-blue-500">2 issues to fix now</p>
              </div>
            </div>
          </AccordionHeader>
          <AccordionPanel className="pl-9 space-y-4">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="font-medium">Active Devices</h3>
                <Button variant="outline" size="sm">
                  Manage All
                </Button>
              </div>

              <div className="space-y-3">
                <div className="flex items-center justify-between p-3 bg-white rounded-md">
                  <div className="flex items-center gap-3">
                    <Smartphone className="w-5 h-5 text-gray-600" />
                    <div>
                      <p className="font-medium">iPhone 13</p>
                      <p className="text-xs text-gray-500">
                        Last active: 2 minutes ago
                      </p>
                    </div>
                  </div>
                  <span className="inline-block px-2.5 py-0.5 text-xs rounded-full font-semibold border bg-red-100 text-red-800 border-red-200">
                    Issue
                  </span>
                </div>

                <div className="flex items-center justify-between p-3 bg-white rounded-md">
                  <div className="flex items-center gap-3">
                    <Laptop className="w-5 h-5 text-gray-600" />
                    <div>
                      <p className="font-medium">MacBook Pro</p>
                      <p className="text-xs text-gray-500">Last active: Now</p>
                    </div>
                  </div>
                  <span className="inline-block px-2.5 py-0.5 text-xs rounded-full font-semibold border bg-green-100 text-green-800 border-green-200">
                    Current
                  </span>
                </div>

                <div className="flex items-center justify-between p-3 bg-white rounded-md">
                  <div className="flex items-center gap-3">
                    <Tablet className="w-5 h-5 text-gray-600" />
                    <div>
                      <p className="font-medium">iPad Air</p>
                      <p className="text-xs text-gray-500">
                        Last active: 3 days ago
                      </p>
                    </div>
                  </div>
                  <span className="inline-block px-2.5 py-0.5 text-xs rounded-full font-semibold border bg-red-100 text-red-800 border-red-200">
                    Issue
                  </span>
                </div>

                <Button className="w-full h-11" variant="neutral">
                  Fix Issues
                </Button>
              </div>
            </div>
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem
          value="item-1"
          className="border border-neutral-200 sm:w-md w-[95%] mx-auto"
        >
          <AccordionHeader className="hover:no-underline py-2">
            <div className="flex items-center gap-4 w-full">
              <History className="w-5 h-5 text-gray-500" />
              <div className="flex-1 text-left">
                <div className="flex items-center gap-1">
                  <span className="font-medium group-data-active:text-black">
                    Version history
                  </span>
                </div>
                <p className="text-sm text-gray-500">Last synced 2 days ago</p>
              </div>
              <svg
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="currentColor"
                className="size-5 shrink-0 group-data-active:animate-spin group-data-active:text-orange-500"
              >
                <path d="M12 2C12.5523 2 13 2.44772 13 3V6C13 6.55228 12.5523 7 12 7C11.4477 7 11 6.55228 11 6V3C11 2.44772 11.4477 2 12 2ZM12 17C12.5523 17 13 17.4477 13 18V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V18C11 17.4477 11.4477 17 12 17ZM22 12C22 12.5523 21.5523 13 21 13H18C17.4477 13 17 12.5523 17 12C17 11.4477 17.4477 11 18 11H21C21.5523 11 22 11.4477 22 12ZM7 12C7 12.5523 6.55228 13 6 13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H6C6.55228 11 7 11.4477 7 12ZM19.0711 19.0711C18.6805 19.4616 18.0474 19.4616 17.6569 19.0711L15.5355 16.9497C15.145 16.5592 15.145 15.9261 15.5355 15.5355C15.9261 15.145 16.5592 15.145 16.9497 15.5355L19.0711 17.6569C19.4616 18.0474 19.4616 18.6805 19.0711 19.0711ZM8.46447 8.46447C8.07394 8.85499 7.44078 8.85499 7.05025 8.46447L4.92893 6.34315C4.53841 5.95262 4.53841 5.31946 4.92893 4.92893C5.31946 4.53841 5.95262 4.53841 6.34315 4.92893L8.46447 7.05025C8.85499 7.44078 8.85499 8.07394 8.46447 8.46447ZM4.92893 19.0711C4.53841 18.6805 4.53841 18.0474 4.92893 17.6569L7.05025 15.5355C7.44078 15.145 8.07394 15.145 8.46447 15.5355C8.85499 15.9261 8.85499 16.5592 8.46447 16.9497L6.34315 19.0711C5.95262 19.4616 5.31946 19.4616 4.92893 19.0711ZM15.5355 8.46447C15.145 8.07394 15.145 7.44078 15.5355 7.05025L17.6569 4.92893C18.0474 4.53841 18.6805 4.53841 19.0711 4.92893C19.4616 5.31946 19.4616 5.95262 19.0711 6.34315L16.9497 8.46447C16.5592 8.85499 15.9261 8.85499 15.5355 8.46447Z"></path>
              </svg>
            </div>
          </AccordionHeader>
          <AccordionPanel className="pl-9 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-medium">Update History</h3>
              <Button variant="ghost" size="sm" className="gap-1">
                <RefreshCw className="w-4 h-4" />
                Refresh
              </Button>
            </div>

            <div className="space-y-3">
              <div className="border-l-2 border-green-500 pl-3 py-1">
                <p className="font-medium">Version 2.4.1</p>
                <p className="text-xs text-gray-500">
                  Installed on March 12, 2025
                </p>
                <p className="text-sm mt-1">
                  Bug fixes and performance improvements
                </p>
              </div>

              <div className="border-l-2 border-gray-300 pl-3 py-1">
                <p className="font-medium">Version 2.4.0</p>
                <p className="text-xs text-gray-500">
                  Installed on February 28, 2025
                </p>
                <p className="text-sm mt-1">
                  Added new features and UI improvements
                </p>
              </div>

              <div className="border-l-2 border-gray-300 pl-3 py-1">
                <p className="font-medium">Version 2.3.5</p>
                <p className="text-xs text-gray-500">
                  Installed on January 15, 2025
                </p>
                <p className="text-sm mt-1">
                  Security patches and minor bug fixes
                </p>
              </div>
            </div>
            <Button variant="outline" className="w-full h-11">
              View All Updates
            </Button>
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem
          value="item-2"
          className="border border-neutral-200 sm:w-md w-[95%] mx-auto"
        >
          <AccordionHeader className="hover:no-underline py-2">
            <div className="flex items-center gap-4 w-full">
              <ArrowUpRight className="w-5 h-5 text-teal-500" />
              <div className="flex-1 text-left">
                <div className="flex items-center gap-1">
                  <span className="font-medium">Integrations</span>
                </div>
                <p className="text-sm text-green-500">3 connected apps</p>
              </div>
            </div>
          </AccordionHeader>
          <AccordionPanel className="pl-9 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-medium">Connected Services</h3>
              <Button variant="outline" size="sm">
                Add New
              </Button>
            </div>

            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-white rounded-md">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center text-white font-bold">
                    G
                  </div>
                  <div>
                    <p className="font-medium">Google Drive</p>
                    <p className="text-xs text-gray-500">
                      Connected on Jan 15, 2025
                    </p>
                  </div>
                </div>
                <SwitchPrimitive.Root
                  checked={switchStates.googleDrive}
                  onCheckedChange={() => toggleSwitch("googleDrive")}
                  className="w-10 h-5 bg-gray-200 rounded-full relative transition-colors data-[state=checked]:bg-neutral-800"
                >
                  <SwitchPrimitive.Thumb className="block w-4 h-4 bg-white rounded-full shadow-md transform transition-transform translate-x-0.5 data-[state=checked]:translate-x-5" />
                </SwitchPrimitive.Root>
              </div>

              <div className="flex items-center justify-between p-3 bg-white rounded-md">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center text-white font-bold">
                    S
                  </div>
                  <div>
                    <p className="font-medium">Slack</p>
                    <p className="text-xs text-gray-500">
                      Connected on Feb 20, 2025
                    </p>
                  </div>
                </div>
                <SwitchPrimitive.Root
                  checked={switchStates.slack}
                  onCheckedChange={() => toggleSwitch("slack")}
                  className="w-10 h-5 bg-gray-200 rounded-full relative transition-colors data-[state=checked]:bg-neutral-800"
                >
                  <SwitchPrimitive.Thumb className="block w-4 h-4 bg-white rounded-full shadow-md transform transition-transform translate-x-0.5 data-[state=checked]:translate-x-5" />
                </SwitchPrimitive.Root>
              </div>

              <div className="flex items-center justify-between p-3 bg-white rounded-md">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 bg-blue-400 rounded-md flex items-center justify-center text-white font-bold">
                    D
                  </div>
                  <div>
                    <p className="font-medium">Dropbox</p>
                    <p className="text-xs text-gray-500">
                      Connected on Mar 5, 2025
                    </p>
                  </div>
                </div>
                <SwitchPrimitive.Root
                  checked={switchStates.dropbox}
                  onCheckedChange={() => toggleSwitch("dropbox")}
                  className="w-10 h-5 bg-gray-200 rounded-full relative transition-colors data-[state=checked]:bg-neutral-800"
                >
                  <SwitchPrimitive.Thumb className="block w-4 h-4 bg-white rounded-full shadow-md transform transition-transform translate-x-0.5 data-[state=checked]:translate-x-5" />
                </SwitchPrimitive.Root>
              </div>
            </div>
            <Button variant="outline" className="w-full gap-2 h-11">
              <Plus className="w-4 h-4" />
              Connect More Services
            </Button>
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem
          value="item-3"
          className="border border-neutral-200 sm:w-md w-[95%] mx-auto"
        >
          <AccordionHeader className="hover:no-underline py-2">
            <div className="flex items-center gap-4 w-full">
              <Lock className="w-5 h-5 text-blue-600" />
              <div className="flex-1 text-left">
                <div className="flex items-center gap-1">
                  <span className="font-medium">Application permissions</span>
                </div>
                <p className="text-sm text-blue-500">
                  All permissions up to date
                </p>
              </div>
            </div>
          </AccordionHeader>
          <AccordionPanel className="pl-9 space-y-4">
            <div className="space-y-4">
              <h3 className="font-medium">Permission Settings</h3>

              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Shield className="w-4 h-4 text-gray-600" />
                    <span>Camera access</span>
                  </div>
                  <SwitchPrimitive.Root
                    checked={switchStates.camera}
                    onCheckedChange={() => toggleSwitch("camera")}
                    className="w-10 h-5 bg-gray-200 rounded-full relative transition-colors data-[state=checked]:bg-neutral-800"
                  >
                    <SwitchPrimitive.Thumb className="block w-4 h-4 bg-white rounded-full shadow-md transform transition-transform translate-x-0.5 data-[state=checked]:translate-x-5" />
                  </SwitchPrimitive.Root>
                </div>

                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Shield className="w-4 h-4 text-gray-600" />
                    <span>Microphone access</span>
                  </div>
                  <SwitchPrimitive.Root
                    checked={switchStates.microphone}
                    onCheckedChange={() => toggleSwitch("microphone")}
                    className="w-10 h-5 bg-gray-200 rounded-full relative transition-colors data-[state=checked]:bg-neutral-800"
                  >
                    <SwitchPrimitive.Thumb className="block w-4 h-4 bg-white rounded-full shadow-md transform transition-transform translate-x-0.5 data-[state=checked]:translate-x-5" />
                  </SwitchPrimitive.Root>
                </div>

                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Shield className="w-4 h-4 text-gray-600" />
                    <span>Location services</span>
                  </div>
                  <SwitchPrimitive.Root
                    checked={switchStates.location}
                    onCheckedChange={() => toggleSwitch("location")}
                    className="w-10 h-5 bg-gray-200 rounded-full relative transition-colors data-[state=checked]:bg-neutral-800"
                  >
                    <SwitchPrimitive.Thumb className="block w-4 h-4 bg-white rounded-full shadow-md transform transition-transform translate-x-0.5 data-[state=checked]:translate-x-5" />
                  </SwitchPrimitive.Root>
                </div>

                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Shield className="w-4 h-4 text-gray-600" />
                    <span>Background processing</span>
                  </div>
                  <SwitchPrimitive.Root
                    checked={switchStates.background}
                    onCheckedChange={() => toggleSwitch("background")}
                    className="w-10 h-5 bg-gray-200 rounded-full relative transition-colors data-[state=checked]:bg-neutral-800"
                  >
                    <SwitchPrimitive.Thumb className="block w-4 h-4 bg-white rounded-full shadow-md transform transition-transform translate-x-0.5 data-[state=checked]:translate-x-5" />
                  </SwitchPrimitive.Root>
                </div>

                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Bell className="w-4 h-4 text-gray-600" />
                    <span>Push notifications</span>
                  </div>
                  <SwitchPrimitive.Root
                    checked={switchStates.notifications}
                    onCheckedChange={() => toggleSwitch("notifications")}
                    className="w-10 h-5 bg-gray-200 rounded-full relative transition-colors data-[state=checked]:bg-neutral-800"
                  >
                    <SwitchPrimitive.Thumb className="block w-4 h-4 bg-white rounded-full shadow-md transform transition-transform translate-x-0.5 data-[state=checked]:translate-x-5" />
                  </SwitchPrimitive.Root>
                </div>
              </div>

              <Button variant="outline" className="w-full h-11">
                Review All Permissions
              </Button>
            </div>
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem
          value="item-4"
          className="border border-neutral-200 sm:w-md w-[95%] mx-auto"
        >
          <AccordionHeader className="hover:no-underline py-2">
            <div className="flex items-center gap-4 w-full">
              <AlertCircle className="w-5 h-5 text-orange-500" />
              <div className="flex-1 text-left">
                <div className="flex items-center gap-1">
                  <span className="font-medium">We want your attention</span>
                </div>
                <p className="text-sm text-amber-600">Something happened</p>
              </div>
            </div>
          </AccordionHeader>
          <AccordionPanel className="pl-9 space-y-4">
            <div className="border border-orange-200 bg-orange-50 rounded-lg">
              <div className="p-4 space-y-3">
                <div className="flex items-center">
                  <AlertCircle className="w-5 h-5 text-orange-500 mt-0.5 mr-2" />
                  <div>
                    <h3 className="font-medium text-orange-800">
                      Account Security Alert
                    </h3>
                    <p className="sm:text-sm text-xs text-orange-700 mt-1">
                      We've detected unusual login activity on your account from
                      a new location.
                    </p>
                  </div>
                </div>

                <div className="bg-white p-3 rounded-md border border-orange-200">
                  <p className="text-sm font-medium">Login Details:</p>
                  <div className="grid grid-cols-2 gap-2 mt-2 text-sm">
                    <div>
                      <p className="text-gray-500">Time:</p>
                      <p>March 15, 2025 at 4:32 PM</p>
                    </div>
                    <div>
                      <p className="text-gray-500">Location:</p>
                      <p>San Francisco, CA</p>
                    </div>
                    <div>
                      <p className="text-gray-500">Device:</p>
                      <p>Windows PC</p>
                    </div>
                    <div>
                      <p className="text-gray-500">Browser:</p>
                      <p>Chrome 123.0</p>
                    </div>
                  </div>
                </div>

                <div className="flex gap-2">
                  <Button variant="neutral" className="flex-1">
                    This was me
                  </Button>
                  <Button variant="destructive" className="flex-1">
                    Secure Account
                  </Button>
                </div>
              </div>
            </div>
          </AccordionPanel>
        </AccordionItem>

        <AccordionItem
          value="item-5"
          className="border border-neutral-200 sm:w-md w-[95%] mx-auto"
        >
          <AccordionHeader className="hover:no-underline py-2">
            <div className="flex items-center gap-4 w-full">
              <CreditCard className="w-5 h-5 text-red-500" />
              <div className="flex-1 text-left">
                <div className="flex items-center gap-1">
                  <span className="font-medium">Card expired</span>
                  <span className="text-gray-500">*5318</span>
                </div>
                <p className="text-sm text-red-500">Please, update now</p>
              </div>
            </div>
          </AccordionHeader>
          <AccordionPanel className="pl-9 space-y-4">
            <div className="space-y-4">
              <div className="bg-red-50 border border-red-200 rounded-md p-4">
                <div className="flex items-start">
                  <AlertCircle className="w-5 h-5 text-red-500 mt-0.5 mr-2" />
                  <div>
                    <h3 className="font-medium text-red-800">
                      Your payment method has expired
                    </h3>
                    <p className="text-sm text-red-700 mt-1">
                      Your Visa card ending in 5318 expired on 03/2025. Please
                      update your payment information to avoid service
                      interruption.
                    </p>
                  </div>
                </div>
              </div>

              <div className="space-y-3">
                <h3 className="font-medium">Update Payment Method</h3>

                <div className="space-y-3">
                  <div className="space-y-2">
                    <label
                      htmlFor="cardNumber"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Card Number
                    </label>
                    <Input
                      id="cardNumber"
                      className="bg-white"
                      placeholder="•••• •••• •••• ••••"
                    />
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div className="space-y-2">
                      <label
                        htmlFor="expiry"
                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                      >
                        Expiry Date
                      </label>
                      <Input
                        id="expiry"
                        className="bg-white"
                        placeholder="MM/YY"
                      />
                    </div>
                    <div className="space-y-2">
                      <label
                        htmlFor="cvc"
                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                      >
                        CVC
                      </label>
                      <Input id="cvc" className="bg-white" placeholder="•••" />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label
                      htmlFor="name"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Name on Card
                    </label>
                    <Input
                      id="name"
                      className="bg-white"
                      placeholder="John Doe"
                    />
                  </div>
                </div>

                <Button variant="neutral" className="w-full h-10">
                  Update Payment Method
                </Button>
              </div>
            </div>
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}