"use client";

import React, { useState } from "react";

export default function SettingsPortal() {
  // App Settings State
  const [appSettings, setAppSettings] = useState({
    defaultTenant: "Apple One",
    timeZone: "Asia/Kolkata (IST)",
    dateFormat: "dd-mm-yyyy",
    currency: "₹ INR",
    language: "English",
    appearance: "Light",
  });

  // Notifications State
  const [notifications, setNotifications] = useState({
    emailAlerts: true,
    pushNotifications: true,
    slaBreachAlerts: true,
    workPermitAlerts: true,
    dailyDigest: false,
  });

 
  return (
    <div className="my-15  text-slate-200  font-sans">
      {/* Top Header & Breadcrumb */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div>
          <div className="text-xs uppercase tracking-wider text-slate-400 mb-2 font-medium">
            <span className="hover:text-slate-200 cursor-pointer">
              APPLE ONE — HQ TOWER
            </span>{" "}
            • <span className="hover:text-slate-200 cursor-pointer">CONFIGURE</span>{" "}
            • <span className="text-slate-300">SETTINGS</span>
          </div>
          <h1 className="text-2xl font-bold text-white mb-1">Settings</h1>
          <p className="text-slate-400 text-sm">
            Personal and notification preferences for this tenant workspace.
          </p>
        </div>

        {/* Save Changes Button */}
        <div>
          <button className="bg-[#2DD4BF] hover:bg-[#26b8a5] text-[#070D19] font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors shadow-sm">
            Save changes
          </button>
        </div>
      </div>

      {/* Main Grid Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {/* Left Column: App Settings */}
        <div className="lg:col-span-7  border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
          <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
            <h2 className="text-base font-semibold text-white">App settings</h2>
            <span className="text-xs text-slate-400">Apple One</span>
          </div>

          <div className="divide-y divide-slate-800/50 px-6 text-sm">
            {/* Default Tenant */}
            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <div>
                <p className="font-semibold text-slate-100">Default tenant</p>
                <p className="text-xs text-slate-400">Workspace loaded on sign-in</p>
              </div>
              <select
                value={appSettings.defaultTenant}
               
                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
              >
                <option value="Apple One">Apple One</option>
              </select>
            </div>

            {/* Time Zone */}
            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <div>
                <p className="font-semibold text-slate-100">Time zone</p>
                <p className="text-xs text-slate-400">
                  Used for timestamps & SLA clocks
                </p>
              </div>
              <select
                value={appSettings.timeZone}
               
                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
              >
                <option value="Asia/Kolkata (IST)">Asia/Kolkata (IST)</option>
                <option value="UTC">UTC</option>
              </select>
            </div>

            {/* Date Format */}
            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <div>
                <p className="font-semibold text-slate-100">Date format</p>
                <p className="text-xs text-slate-400">
                  Display format across the app
                </p>
              </div>
              <select
                value={appSettings.dateFormat}
               
                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
              >
                <option value="dd-mm-yyyy">dd-mm-yyyy</option>
                <option value="mm-dd-yyyy">mm-dd-yyyy</option>
              </select>
            </div>

            {/* Currency */}
            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <div>
                <p className="font-semibold text-slate-100">Currency</p>
                <p className="text-xs text-slate-400">Inventory, AMC & cost figures</p>
              </div>
              <select
                value={appSettings.currency}
                
                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
              >
                <option value="₹ INR">₹ INR</option>
                <option value="$ USD">$ USD</option>
              </select>
            </div>

            {/* Language */}
            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <div>
                <p className="font-semibold text-slate-100">Language</p>
                <p className="text-xs text-slate-400">Interface language</p>
              </div>
              <select
                value={appSettings.language}
               
                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
              >
                <option value="English">English</option>
              </select>
            </div>

            {/* Appearance */}
            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <div>
                <p className="font-semibold text-slate-100">Appearance</p>
                <p className="text-xs text-slate-400">
                  Your personal light / dark preference
                </p>
              </div>
              <select
                value={appSettings.appearance}
              
                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
              >
                <option value="Light">Light</option>
                <option value="Dark">Dark</option>
              </select>
            </div>

            {/* Brand Accent */}
            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <div>
                <p className="font-semibold text-slate-100">Brand accent</p>
                <p className="text-xs text-slate-400">
                  Set per tenant in Administration → Preferences
                </p>
              </div>
              <div className="flex items-center space-x-2 text-xs font-mono text-slate-400">
                <span className="w-5 h-5 rounded bg-[#2DD4BF] border border-slate-600 inline-block" />
                <span>#2DD4BF</span>
                <span>• inherited</span>
              </div>
            </div>
          </div>
        </div>

        {/* Right Column: Notifications & Personal Settings */}
        <div className="lg:col-span-5 space-y-6">
          {/* Notifications Card */}
          <div className="bg-[#0B132B]/80 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
            <div className="px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
              <h2 className="text-base font-semibold text-white">Notifications</h2>
            </div>

            <div className="divide-y divide-slate-800/50 px-6 text-sm">
              {/* Email Alerts */}
              <div className="py-3.5 flex items-center justify-between">
                <div>
                  <p className="font-semibold text-slate-100">Email alerts</p>
                  <p className="text-xs text-slate-400">
                    Request, approval & escalation emails
                  </p>
                </div>
                <button
                
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                    notifications.emailAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
                      notifications.emailAlerts ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>

              {/* Push Notifications */}
              <div className="py-3.5 flex items-center justify-between">
                <div>
                  <p className="font-semibold text-slate-100">Push notifications</p>
                  <p className="text-xs text-slate-400">
                    Mobile app push for assignments
                  </p>
                </div>
                <button
                
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                    notifications.pushNotifications ? "bg-[#2DD4BF]" : "bg-slate-700"
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
                      notifications.pushNotifications ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>

              {/* SLA Breach Alerts */}
              <div className="py-3.5 flex items-center justify-between">
                <div>
                  <p className="font-semibold text-slate-100">SLA breach alerts</p>
                  <p className="text-xs text-slate-400">
                    Notify when a request goes overdue
                  </p>
                </div>
                <button
                 
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                    notifications.slaBreachAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
                      notifications.slaBreachAlerts ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>

              {/* Work-permit Alerts */}
              <div className="py-3.5 flex items-center justify-between">
                <div>
                  <p className="font-semibold text-slate-100">Work-permit alerts</p>
                  <p className="text-xs text-slate-400">
                    Notify on permit raise & approval
                  </p>
                </div>
                <button
                
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                    notifications.workPermitAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
                      notifications.workPermitAlerts ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>

              {/* Daily Digest */}
              <div className="py-3.5 flex items-center justify-between">
                <div>
                  <p className="font-semibold text-slate-100">Daily digest</p>
                  <p className="text-xs text-slate-400">
                    Morning summary of open items
                  </p>
                </div>
                <button
                
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                    notifications.dailyDigest ? "bg-[#2DD4BF]" : "bg-slate-700"
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
                      notifications.dailyDigest ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>
            </div>
          </div>

          {/* Personal Settings Card */}
          <div className="bg-[#0B132B]/80 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
            <div className="px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
              <h2 className="text-base font-semibold text-white">Personal settings</h2>
            </div>

            <div className="p-6 space-y-4 text-xs font-mono">
              <div className="flex items-center">
                <span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
                  NAME
                </span>
                <span className="text-slate-100 font-sans text-sm font-semibold">
                  Dhananjay T.
                </span>
              </div>

              <div className="flex items-center">
                <span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
                  ROLE
                </span>
                <div className="flex items-center space-x-2">
                  <span className="text-slate-100 font-sans text-sm font-semibold">
                    Admin
                  </span>
                  <span className="inline-flex items-center space-x-1 px-2 py-0.5 rounded-full text-[10px] font-sans font-semibold bg-emerald-950/80 border border-emerald-800 text-emerald-400">
                    <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
                    <span>COMPLETED</span>
                  </span>
                </div>
              </div>

              <div className="flex items-center">
                <span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
                  EMAIL
                </span>
                <span className="text-slate-200">dhananjay@kafm.io</span>
              </div>

              <div className="flex items-center">
                <span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
                  MOBILE
                </span>
                <span className="text-slate-200">98•••••012</span>
              </div>

              {/* Action Buttons */}
              <div className="pt-4 flex items-center space-x-4 font-sans">
                <button className="px-4 py-2 bg-[#080E21] hover:bg-slate-800 border border-slate-700/80 rounded-lg text-slate-200 text-xs font-medium transition-colors">
                  Edit profile
                </button>
                <button className="text-slate-400 hover:text-slate-200 text-xs font-medium transition-colors">
                  Change password
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}