'use client';

import { useState, use } from 'react';
import { Users, ArrowLeft, Mail, Phone, MapPin, Shield, Edit, Trash2, KeyRound, Eye, EyeOff, Wallet, Bike, Zap, Store, CheckCircle, XCircle, Clock, Link2 } from 'lucide-react';
import Link from 'next/link';

type UserRole = 'admin' | 'manager' | 'biker' | 'investor' | 'swapstation' | 'merchant';
type UserStatus = 'active' | 'inactive' | 'suspended';

interface User {
  id: string;
  name: string;
  email: string;
  phone: string;
  role: UserRole;
  status: UserStatus;
  password: string;
  lastLogin: string;
  createdAt: string;
  linkedProfile?: {
    type: 'biker' | 'investor' | 'swapstation' | 'merchant';
    id: string;
    name: string;
  };
}

const mockUser: User = {
  id: 'USR-001',
  name: 'Admin User',
  email: 'admin@jaiben.com',
  phone: '+8801712345678',
  role: 'admin',
  status: 'active',
  password: '********',
  lastLogin: '2024-02-16 10:30',
  createdAt: '2023-01-01',
  linkedProfile: undefined
};

const mockUsers: User[] = [
  { id: 'USR-003', name: 'Jamal Biker', email: 'jamal@biker.com', phone: '+8801912345678', role: 'biker', status: 'active', password: '********', lastLogin: '2024-02-15 18:00', createdAt: '2023-09-20', linkedProfile: { type: 'biker', id: 'BIK-001', name: 'Jamal Delivery' } },
  { id: 'USR-004', name: 'Rahim Investor', email: 'rahim@investor.com', phone: '+8801512345678', role: 'investor', status: 'active', password: '********', lastLogin: '2024-02-14 12:00', createdAt: '2023-03-10', linkedProfile: { type: 'investor', id: 'INV-001', name: 'Rahim Investments' } },
  { id: 'USR-005', name: 'Swap Station Owner', email: 'swapstation@owner.com', phone: '+8801612345678', role: 'swapstation', status: 'active', password: '********', lastLogin: '2024-02-15 14:30', createdAt: '2023-11-05', linkedProfile: { type: 'swapstation', id: 'SHP-001', name: 'Jaiben Swap Station' } },
  { id: 'USR-006', name: 'Merchant User', email: 'merchant@jaiben.com', phone: '+8801412345678', role: 'merchant', status: 'active', password: '********', lastLogin: '2024-02-15 16:00', createdAt: '2023-08-15', linkedProfile: { type: 'merchant', id: 'MCH-001', name: 'Rahim Delivery Service' } },
];

const roleColors: Record<UserRole, string> = {
  admin: 'bg-red-100 text-red-700',
  manager: 'bg-purple-100 text-purple-700',
  biker: 'bg-blue-100 text-blue-700',
  investor: 'bg-green-100 text-green-700',
  swapstation: 'bg-amber-100 text-amber-700',
  merchant: 'bg-cyan-100 text-cyan-700'
};

const statusColors: Record<UserStatus, string> = {
  active: 'bg-green-100 text-green-700',
  inactive: 'bg-slate-100 text-slate-700',
  suspended: 'bg-red-100 text-red-700'
};

const roleLabels: Record<UserRole, string> = {
  admin: 'Admin',
  manager: 'Manager',
  biker: 'Biker',
  investor: 'Investor',
  swapstation: 'Swap Station',
  merchant: 'Merchant'
};

const statusLabels: Record<UserStatus, string> = {
  active: 'Active',
  inactive: 'Inactive',
  suspended: 'Suspended'
};

export default function UserDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const [user, setUser] = useState<User>(mockUser);
  const [showPassword, setShowPassword] = useState(false);
  const [passwordForm, setPasswordForm] = useState({ current: '', new: '', confirm: '' });
  const [activeTab, setActiveTab] = useState<'profile' | 'security' | 'linked'>('profile');

  const linkedProfiles = mockUsers.filter(u => u.linkedProfile);

  return (
    <div className="p-4 lg:p-6">
      <div className="flex items-center gap-4 mb-6">
        <Link href="/admin/users" className="p-2 hover:bg-slate-100 rounded-lg">
          <ArrowLeft className="w-5 h-5 text-slate-600" />
        </Link>
        <div className="flex-1">
          <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Account Settings</h1>
          <p className="text-sm text-slate-500">{user.id} • Joined {user.createdAt}</p>
        </div>
        <button className="py-2 px-4 bg-red-500 text-white rounded-lg text-sm hover:bg-red-600 flex items-center gap-2">
          <Trash2 className="w-4 h-4" /> Delete Account
        </button>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-full bg-accent-light flex items-center justify-center">
              <span className="text-xl font-bold text-accent">{user.name.charAt(0).toUpperCase()}</span>
            </div>
            <div>
              <p className="text-lg font-bold text-slate-800">{user.name}</p>
              <p className="text-xs text-slate-400">{roleLabels[user.role]}</p>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100 flex items-center justify-center">
          <span className={`text-sm px-3 py-1 rounded-full ${statusColors[user.status]}`}>
            {statusLabels[user.status]}
          </span>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <p className="text-sm text-slate-500">Last Login</p>
          <p className="text-lg font-bold text-slate-800">{user.lastLogin}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <p className="text-sm text-slate-500">Linked Profile</p>
          <p className="text-lg font-bold text-slate-800">{user.linkedProfile ? user.linkedProfile.type.charAt(0).toUpperCase() + user.linkedProfile.type.slice(1).replace('-', ' ') : 'None'}</p>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 mb-6">
        <div className="flex gap-6 p-4 border-b border-slate-100">
          <button
            onClick={() => setActiveTab('profile')}
            className={`text-sm font-medium pb-2 border-b-2 transition-colors ${
              activeTab === 'profile' 
                ? 'text-accent border-accent' 
                : 'text-slate-500 border-transparent hover:text-slate-700'
            }`}
          >
            Profile
          </button>
          <button
            onClick={() => setActiveTab('security')}
            className={`text-sm font-medium pb-2 border-b-2 transition-colors ${
              activeTab === 'security' 
                ? 'text-accent border-accent' 
                : 'text-slate-500 border-transparent hover:text-slate-700'
            }`}
          >
            Security
          </button>
          <button
            onClick={() => setActiveTab('linked')}
            className={`text-sm font-medium pb-2 border-b-2 transition-colors ${
              activeTab === 'linked' 
                ? 'text-accent border-accent' 
                : 'text-slate-500 border-transparent hover:text-slate-700'
            }`}
          >
            Linked Profiles
          </button>
        </div>

        {activeTab === 'profile' && (
          <div className="p-4 space-y-6">
            <div className="grid lg:grid-cols-2 gap-6">
              <div className="space-y-4">
                <h3 className="font-semibold text-slate-800">Personal Information</h3>
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <Users className="w-4 h-4 text-slate-400" />
                    <span className="text-sm text-slate-600">{user.name}</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="text-xs px-2 py-1 rounded-full bg-slate-50 text-slate-600">Role</span>
                    <span className={`text-xs px-2 py-1 rounded-full ${roleColors[user.role]}`}>
                      {roleLabels[user.role]}
                    </span>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="text-xs px-2 py-1 rounded-full bg-slate-50 text-slate-600">Status</span>
                    <span className={`text-xs px-2 py-1 rounded-full ${statusColors[user.status]}`}>
                      {statusLabels[user.status]}
                    </span>
                  </div>
                </div>
              </div>

              <div className="space-y-4">
                <h3 className="font-semibold text-slate-800">Contact Information</h3>
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <Mail className="w-4 h-4 text-slate-400" />
                    <span className="text-sm text-slate-600">{user.email}</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <Phone className="w-4 h-4 text-slate-400" />
                    <span className="text-sm text-slate-600">{user.phone}</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="pt-4 border-t border-slate-100">
              <button className="py-2 px-4 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
                <Edit className="w-4 h-4" /> Edit Profile
              </button>
            </div>
          </div>
        )}

        {activeTab === 'security' && (
          <div className="p-4 space-y-6">
            <div className="grid lg:grid-cols-2 gap-6">
              <div className="space-y-4">
                <h3 className="font-semibold text-slate-800">Password</h3>
                <div className="space-y-3">
                  <div className="flex items-center justify-between p-3 border border-slate-200 rounded-lg">
                    <div className="flex items-center gap-3">
                      <KeyRound className="w-4 h-4 text-slate-400" />
                      <span className="text-sm text-slate-600">Password</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-slate-500">{showPassword ? '123456' : '••••••••'}</span>
                      <button onClick={() => setShowPassword(!showPassword)} className="p-1">
                        {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div className="space-y-4">
                <h3 className="font-semibold text-slate-800">Change Password</h3>
                <div className="space-y-3">
                  <div>
                    <label className="text-xs text-slate-500">Current Password</label>
                    <input
                      type="password"
                      value={passwordForm.current}
                      onChange={(e) => setPasswordForm({ ...passwordForm, current: e.target.value })}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                      placeholder="••••••••"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500">New Password</label>
                    <input
                      type="password"
                      value={passwordForm.new}
                      onChange={(e) => setPasswordForm({ ...passwordForm, new: e.target.value })}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                      placeholder="••••••••"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-slate-500">Confirm New Password</label>
                    <input
                      type="password"
                      value={passwordForm.confirm}
                      onChange={(e) => setPasswordForm({ ...passwordForm, confirm: e.target.value })}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                      placeholder="••••••••"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className="pt-4 border-t border-slate-100 flex gap-2">
              <button className="py-2 px-4 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
                Update Password
              </button>
            </div>
          </div>
        )}

        {activeTab === 'linked' && (
          <div className="p-4">
            <div className="mb-4">
              <p className="text-sm text-slate-500">This user is linked to the following profiles. Click to navigate.</p>
            </div>
            
            {user.linkedProfile ? (
              <div className="p-4 border border-accent rounded-lg bg-accent-light">
                <div className="flex items-center gap-3">
                  {user.linkedProfile.type === 'biker' && <Bike className="w-5 h-5 text-blue-500" />}
                  {user.linkedProfile.type === 'investor' && <Wallet className="w-5 h-5 text-green-500" />}
                  {user.linkedProfile.type === 'swapstation' && <Store className="w-5 h-5 text-amber-500" />}
                  {user.linkedProfile.type === 'merchant' && <Zap className="w-5 h-5 text-cyan-500" />}
                  <div>
                    <p className="text-sm font-medium text-slate-700">{user.linkedProfile.name}</p>
                    <p className="text-xs text-slate-400">{user.linkedProfile.id}</p>
                  </div>
                  <Link 
                    href={`/admin/${user.linkedProfile.type === 'biker' ? 'bikers' : user.linkedProfile.type === 'investor' ? 'investors' : user.linkedProfile.type === 'merchant' ? 'merchants' : 'fleet'}/${user.linkedProfile.id.toLowerCase()}`}
                    className="ml-auto py-1 px-3 bg-accent text-white rounded text-xs"
                  >
                    View
                  </Link>
                </div>
              </div>
            ) : (
              <div className="text-center py-8 text-slate-500">
                <Link2 className="w-8 h-8 mx-auto mb-2 text-slate-300" />
                <p className="text-sm">No linked profile</p>
              </div>
            )}

            <div className="mt-6">
              <h4 className="font-medium text-slate-800 mb-3">Link New Profile</h4>
              <div className="grid grid-cols-2 gap-3">
                <Link href="/admin/bikers" className="p-3 border border-slate-200 rounded-lg hover:bg-slate-50 flex items-center gap-2">
                  <Bike className="w-4 h-4 text-blue-500" />
                  <span className="text-sm text-slate-600">Biker</span>
                </Link>
                <Link href="/admin/investors" className="p-3 border border-slate-200 rounded-lg hover:bg-slate-50 flex items-center gap-2">
                  <Wallet className="w-4 h-4 text-green-500" />
                  <span className="text-sm text-slate-600">Investor</span>
                </Link>
                <Link href="/admin/merchants" className="p-3 border border-slate-200 rounded-lg hover:bg-slate-50 flex items-center gap-2">
                  <Zap className="w-4 h-4 text-cyan-500" />
                  <span className="text-sm text-slate-600">Merchant</span>
                </Link>
                <Link href="/admin/swap-stations" className="p-3 border border-slate-200 rounded-lg hover:bg-slate-50 flex items-center gap-2">
                  <Store className="w-4 h-4 text-amber-500" />
                  <span className="text-sm text-slate-600">Swap Station</span>
                </Link>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}