import { Link, useNavigate } from '@tanstack/react-router'
import { removeAuthToken } from '@/services/auth'
import { useUserStore } from '@/stores/userStore'



function AdminDashboard() {
  const navigate = useNavigate()

  const handleLogout = async () => {
    await removeAuthToken()
    navigate({ to: '/' as any })
  }

  const { user } = useUserStore();

  return (
    <div className="mt-8 bg-white rounded-lg shadow-md p-6">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-2xl font-bold text-gray-900">Admin Dashboard</h2>
        <button
          onClick={handleLogout}
          className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 font-medium"
        >
          Logout
        </button>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <Link
          to="/user-connect"
          className="bg-blue-50 p-4 rounded-lg hover:bg-blue-100 transition-colors"
        >
          <h3 className="font-semibold text-blue-900 mb-2">User Management</h3>
          <p className="text-blue-700 text-sm">View all users and their contact info</p>
        </Link>
        {/*<div className="bg-green-50 p-4 rounded-lg">
          <h3 className="font-semibold text-green-900 mb-2">System Settings</h3>
          <p className="text-green-700 text-sm">Configure system-wide settings</p>
        </div>
        <div className="bg-purple-50 p-4 rounded-lg">
          <h3 className="font-semibold text-purple-900 mb-2">Analytics</h3>
          <p className="text-purple-700 text-sm">View system analytics and reports</p>
        </div>*/}
        {user?.role?.name === 'super_admin' && (
          <Link
            to="/super-admin"
            className="bg-red-50 p-4 rounded-lg border-2 border-red-200 hover:bg-red-100 transition-colors"
          >
            <h3 className="font-semibold text-red-900 mb-2">Super Admin</h3>
            <p className="text-red-700 text-sm">Advanced system management and user creation</p>
          </Link>
        )}
      </div>
    </div>
  );
}

function MarketerDashboard() {
  const navigate = useNavigate()

  const handleLogout = async () => {
    await removeAuthToken()
    navigate({ to: '/' as any })
  }



  const handleFirstUserCoupon = () => {
    navigate({ to: '/create-coupon' as any })
  }

  const handleDiscountCoupon = () => {
    navigate({ to: '/create-coupon' as any })
  }

  return (
    <div className="mt-8 bg-white rounded-lg shadow-md p-6">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold text-gray-900">Marketing Dashboard</h2>
        <button
          onClick={handleLogout}
          className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 font-medium"
        >
          Logout
        </button>
      </div>

      <div className="mb-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-3">Quick Actions</h3>
        <div className="flex gap-4">
          <button
            onClick={handleFirstUserCoupon}
            className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 font-medium"
          >
            First User Coupon
          </button>
          <button
            onClick={handleDiscountCoupon}
            className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 font-medium"
          >
            Discount Coupon
          </button>
        </div>
      </div>
    </div>
  );
}

function ErrorPage() {
  const navigate = useNavigate()

  const handleLogout = async () => {
    await removeAuthToken()
    navigate({ to: '/' as any })
  }

  return (
    <div className="mt-8 bg-red-50 border border-red-200 rounded-lg p-6">
      <div className="flex justify-between items-start mb-4">
        <div className="text-red-600">
          <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
          </svg>
        </div>
        <button
          onClick={handleLogout}
          className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 font-medium"
        >
          Logout
        </button>
      </div>
      <h2 className="text-xl font-bold text-red-900 mb-2">Access Denied</h2>
      <p className="text-red-700">
        Your role does not have access to this dashboard. Please contact an administrator.
      </p>
    </div>
  );
}

export function UserHomeRoute() {
  const { user } = useUserStore()

  return (
    <div className="max-w-6xl mx-auto space-y-6">
      {(user?.role?.name === 'admin' || user?.role?.name === 'super_admin') && <AdminDashboard />}
      {user?.role?.name === 'marketer' && <MarketerDashboard />}
      {user?.role && user.role.name !== 'admin' && user.role.name !== 'super_admin' && user.role.name !== 'marketer' && <ErrorPage />}
    </div>
  )
}
