"use client";

import { useState } from "react";
import Link from "next/link";

interface UserProfileProps {
  displayName: string;
  givenName: string;
  familyName: string;
  email: string;
  groups: string[];
  keycloakId: string;
  tenantId: string;
}

export default function UserProfile({
  displayName,
  givenName,
  familyName,
  email,
  groups,
  keycloakId,
  tenantId,
}: UserProfileProps) {
  const [activeTab, setActiveTab] = useState<"overview" | "groups" | "sessions">("overview");

  const normalizedGroups = groups.map((g) => g.replace(/^\//, "")).filter(Boolean);
  const adminGroups = normalizedGroups.filter(
    (g) => g.includes("admin") || g === "platformadmins" || g === "platformoperators" || g === "tenantadmins"
  );
  const productGroups = normalizedGroups.filter((g) => g.startsWith("gsc") && !g.includes("admin"));
  const otherGroups = normalizedGroups.filter(
    (g) => !adminGroups.includes(g) && !productGroups.includes(g)
  );

  const initials = `${givenName.charAt(0)}${familyName.charAt(0)}`.toUpperCase();

  return (
    <>
      {/* Page Header */}
      <div className="d-flex align-items-center mb-4">
        <Link href="/" className="btn btn-light btn-sm me-3">
          <i className="ph-arrow-left"></i>
        </Link>
        <div>
          <h4 className="mb-0">
            <i className="ph-user-circle me-2"></i>
            My Profile
          </h4>
          <p className="text-muted mb-0 mt-1">View your account information and group memberships.</p>
        </div>
      </div>

      <div className="row">
        {/* Left Column */}
        <div className="col-xl-8">
          {/* Profile Card */}
          <div className="card mb-3">
            <div className="card-body">
              <div className="d-flex align-items-center">
                <div
                  className="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-4 flex-shrink-0"
                  style={{ width: "80px", height: "80px", fontSize: "1.5rem" }}
                >
                  <span className="fw-bold">{initials}</span>
                </div>
                <div className="flex-fill">
                  <h3 className="mb-1">{displayName}</h3>
                  <p className="text-muted mb-2">{email}</p>
                  <div className="d-flex gap-2 flex-wrap">
                    {adminGroups.length > 0 && (
                      <span className="badge bg-danger bg-opacity-10 text-danger">
                        <i className="ph-shield-star me-1"></i>
                        Administrator
                      </span>
                    )}
                    <span className="badge bg-success bg-opacity-10 text-success">
                      <i className="ph-check-circle me-1"></i>
                      Active
                    </span>
                    <span className="badge bg-primary bg-opacity-10 text-primary">
                      <i className="ph-users me-1"></i>
                      {normalizedGroups.length} group{normalizedGroups.length !== 1 ? "s" : ""}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Tabs */}
          <div className="card">
            <div className="card-header">
              <ul className="nav nav-tabs card-header-tabs">
                <li className="nav-item">
                  <button
                    className={`nav-link ${activeTab === "overview" ? "active" : ""}`}
                    onClick={() => setActiveTab("overview")}
                  >
                    <i className="ph-identification-card me-2"></i>
                    Overview
                  </button>
                </li>
                <li className="nav-item">
                  <button
                    className={`nav-link ${activeTab === "groups" ? "active" : ""}`}
                    onClick={() => setActiveTab("groups")}
                  >
                    <i className="ph-users-three me-2"></i>
                    Groups
                    <span className="badge bg-primary ms-2">{normalizedGroups.length}</span>
                  </button>
                </li>
                <li className="nav-item">
                  <button
                    className={`nav-link ${activeTab === "sessions" ? "active" : ""}`}
                    onClick={() => setActiveTab("sessions")}
                  >
                    <i className="ph-devices me-2"></i>
                    Active Sessions
                  </button>
                </li>
              </ul>
            </div>

            <div className="card-body">
              {/* Overview Tab */}
              {activeTab === "overview" && (
                <>
                  <h5 className="mb-3">
                    <i className="ph-identification-card me-2"></i>
                    Personal Information
                  </h5>
                  <div className="table-responsive">
                    <table className="table">
                      <tbody>
                        <tr>
                          <td className="text-muted" style={{ width: "200px" }}>First Name</td>
                          <td className="fw-medium">{givenName}</td>
                        </tr>
                        <tr>
                          <td className="text-muted">Last Name</td>
                          <td className="fw-medium">{familyName}</td>
                        </tr>
                        <tr>
                          <td className="text-muted">Display Name</td>
                          <td className="fw-medium">{displayName}</td>
                        </tr>
                        <tr>
                          <td className="text-muted">Email Address</td>
                          <td className="fw-medium">
                            <i className="ph-envelope me-1 text-primary"></i>
                            {email}
                          </td>
                        </tr>
                        <tr>
                          <td className="text-muted">Tenant ID</td>
                          <td>
                            <code className="text-muted">{tenantId}</code>
                          </td>
                        </tr>
                        <tr>
                          <td className="text-muted">Account ID</td>
                          <td>
                            <code className="text-muted">{keycloakId}</code>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <div className="alert alert-light border mt-3 mb-0">
                    <i className="ph-info me-2 text-primary"></i>
                    Profile information is managed through your identity provider. Contact your administrator to update your name or email.
                  </div>
                </>
              )}

              {/* Groups Tab */}
              {activeTab === "groups" && (
                <>
                  {adminGroups.length > 0 && (
                    <>
                      <h5 className="mb-3">
                        <i className="ph-shield-star me-2 text-danger"></i>
                        Administrative Roles
                      </h5>
                      <div className="d-flex gap-2 flex-wrap mb-4">
                        {adminGroups.map((group) => (
                          <span key={group} className="badge bg-danger bg-opacity-10 text-danger py-2 px-3">
                            <i className="ph-shield me-1"></i>
                            {group}
                          </span>
                        ))}
                      </div>
                    </>
                  )}

                  {productGroups.length > 0 && (
                    <>
                      <h5 className="mb-3">
                        <i className="ph-app-window me-2 text-primary"></i>
                        Product Access
                      </h5>
                      <div className="d-flex gap-2 flex-wrap mb-4">
                        {productGroups.map((group) => (
                          <span key={group} className="badge bg-primary bg-opacity-10 text-primary py-2 px-3">
                            <i className="ph-app-window me-1"></i>
                            {group}
                          </span>
                        ))}
                      </div>
                    </>
                  )}

                  {otherGroups.length > 0 && (
                    <>
                      <h5 className="mb-3">
                        <i className="ph-users me-2 text-secondary"></i>
                        Other Groups
                      </h5>
                      <div className="d-flex gap-2 flex-wrap mb-4">
                        {otherGroups.map((group) => (
                          <span key={group} className="badge bg-secondary bg-opacity-10 text-secondary py-2 px-3">
                            {group}
                          </span>
                        ))}
                      </div>
                    </>
                  )}

                  {normalizedGroups.length === 0 && (
                    <div className="text-center text-muted py-4">
                      <i className="ph-users-three fs-1 d-block mb-2"></i>
                      <p>No group memberships found.</p>
                    </div>
                  )}
                </>
              )}

              {/* Sessions Tab */}
              {activeTab === "sessions" && (
                <>
                  <h5 className="mb-3">
                    <i className="ph-devices me-2"></i>
                    Active Sessions
                  </h5>
                  <div className="d-flex align-items-center p-3 bg-light rounded mb-3">
                    <div className="bg-success bg-opacity-10 text-success rounded-pill p-2 me-3">
                      <i className="ph-monitor"></i>
                    </div>
                    <div className="flex-fill">
                      <div className="fw-medium">Current Session</div>
                      <small className="text-muted">Active now</small>
                    </div>
                    <span className="badge bg-success">
                      <i className="ph-check me-1"></i>
                      Current
                    </span>
                  </div>

                  <div className="alert alert-light border mb-0">
                    <i className="ph-info me-2 text-primary"></i>
                    Session management is handled by your identity provider. Use the security page to review login activity.
                  </div>
                </>
              )}
            </div>
          </div>
        </div>

        {/* Right Column */}
        <div className="col-xl-4">
          {/* Quick Info Card */}
          <div className="card">
            <div className="card-header">
              <h5 className="mb-0">
                <i className="ph-info me-2"></i>
                Account Summary
              </h5>
            </div>
            <div className="card-body">
              <div className="list-group list-group-flush">
                <div className="list-group-item d-flex justify-content-between px-0">
                  <span className="text-muted">Status</span>
                  <span className="badge bg-success">Active</span>
                </div>
                <div className="list-group-item d-flex justify-content-between px-0">
                  <span className="text-muted">Role</span>
                  <span className="fw-medium">
                    {adminGroups.length > 0 ? "Administrator" : "User"}
                  </span>
                </div>
                <div className="list-group-item d-flex justify-content-between px-0">
                  <span className="text-muted">Groups</span>
                  <span className="fw-medium">{normalizedGroups.length}</span>
                </div>
                <div className="list-group-item d-flex justify-content-between px-0">
                  <span className="text-muted">Products</span>
                  <span className="fw-medium">{productGroups.length + (adminGroups.length > 0 ? adminGroups.filter(g => g.startsWith("gsc")).length : 0)}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Quick Actions Card */}
          <div className="card">
            <div className="card-header">
              <h5 className="mb-0">
                <i className="ph-lightning me-2"></i>
                Quick Actions
              </h5>
            </div>
            <div className="card-body">
              <div className="d-grid gap-2">
                <Link href="/account/settings" className="btn btn-light text-start">
                  <i className="ph-gear me-2"></i>
                  Account Settings
                </Link>
                <Link href="/account/security" className="btn btn-light text-start">
                  <i className="ph-shield-check me-2"></i>
                  Security Settings
                </Link>
                <Link href="/account/privacy" className="btn btn-light text-start">
                  <i className="ph-lock-key me-2"></i>
                  Privacy Settings
                </Link>
                <Link href="/account/analytics" className="btn btn-light text-start">
                  <i className="ph-chart-line-up me-2"></i>
                  View Analytics
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
