import React, { useState } from "react";
import Card from "../../../shared/components/ui/Card";
import Button from "../../../shared/components/ui/Button";
import Input from "../../../shared/components/ui/Input";
import Tabs from "../../../shared/components/ui/Tabs";
import Checkbox from "../../../shared/components/ui/Checkbox";

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState("profile");

  const tabs = [
    { id: "profile", label: "Profile" },
    { id: "workspace", label: "Workspace" },
    { id: "notifications", label: "Notifications" },
    { id: "api", label: "API Integrations" },
  ];

  return (
    <div className="space-y-8 p-8 max-w-5xl mx-auto">
      <div>
        <h1 className="text-3xl font-bold tracking-tight text-white">Settings</h1>
        <p className="text-sm text-slate-400 mt-1">
          Manage your account credentials, workspace defaults, and notifications.
        </p>
      </div>

      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />

      {activeTab === "profile" && (
        <Card className="space-y-6">
          <h3 className="text-base font-semibold text-white border-b border-slate-800 pb-3">
            Profile Preferences
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input label="First Name" defaultValue="John" />
            <Input label="Last Name" defaultValue="Doe" />
            <Input label="Email Address" defaultValue="john@hzprojecthub.com" className="md:col-span-2" />
          </div>

          <div className="pt-4 border-t border-slate-800 flex justify-end">
            <Button>Save Changes</Button>
          </div>
        </Card>
      )}

      {activeTab === "workspace" && (
        <Card className="space-y-6">
          <h3 className="text-base font-semibold text-white border-b border-slate-800 pb-3">
            Workspace Configuration
          </h3>

          <div className="space-y-4">
            <Input label="Workspace Name" defaultValue="HZ Enterprise Workspace" />
            <Checkbox label="Allow all workspace members to create new projects" defaultChecked />
            <Checkbox label="Enable public task links" />
          </div>

          <div className="pt-4 border-t border-slate-800 flex justify-end">
            <Button>Update Workspace</Button>
          </div>
        </Card>
      )}

      {activeTab === "notifications" && (
        <Card className="space-y-6">
          <h3 className="text-base font-semibold text-white border-b border-slate-800 pb-3">
            Notification Rules
          </h3>

          <div className="space-y-3">
            <Checkbox label="Email me when I am assigned to a task" defaultChecked />
            <Checkbox label="Notify me of comments on tasks I follow" defaultChecked />
            <Checkbox label="Daily digest of overdue tasks" defaultChecked />
          </div>

          <div className="pt-4 border-t border-slate-800 flex justify-end">
            <Button>Save Notifications</Button>
          </div>
        </Card>
      )}

      {activeTab === "api" && (
        <Card className="space-y-6">
          <h3 className="text-base font-semibold text-white border-b border-slate-800 pb-3">
            PHP API Endpoints & Keys
          </h3>

          <div className="space-y-4">
            <Input label="API Base URL" defaultValue="/api" disabled />
            <Input label="Personal Access Token" defaultValue="hz_pat_98f7d9a12c8e310a" type="password" />
          </div>

          <div className="pt-4 border-t border-slate-800 flex justify-end">
            <Button variant="secondary">Regenerate Token</Button>
          </div>
        </Card>
      )}
    </div>
  );
}