import React, { useState } from "react";
import { UserPlusIcon, EnvelopeIcon } from "@heroicons/react/24/outline";
import Card from "@/shared/components/ui/Card";
import Button from "@/shared/components/ui/Button";
import Avatar from "@/shared/components/ui/Avatar";
import Badge from "@/shared/components/ui/Badge";
import Progress from "@/shared/components/ui/Progress";

export default function TeamPage() {
  const [members] = useState([
    { id: 1, name: "John Doe", role: "Frontend Lead", email: "john@hzprojecthub.com", tasks: 8, workload: 80, status: "Active" },
    { id: 2, name: "Michael K", role: "Backend Architect", email: "michael@hzprojecthub.com", tasks: 12, workload: 95, status: "Busy" },
    { id: 3, name: "Alice L", role: "UI/UX Designer", email: "alice@hzprojecthub.com", tasks: 5, workload: 45, status: "Active" },
    { id: 4, name: "Sarah M", role: "Product Manager", email: "sarah@hzprojecthub.com", tasks: 4, workload: 30, status: "Active" },
  ]);

  return (
    <div className="space-y-8 p-8 max-w-7xl mx-auto">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-white">Team & Workload</h1>
          <p className="text-sm text-slate-400 mt-1">
            Monitor capacity, manage member permissions, and balance workloads across projects.
          </p>
        </div>

        <Button leftIcon={<UserPlusIcon className="h-4 w-4" />}>
          Invite Member
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {members.map((member) => (
          <Card key={member.id} className="space-y-4 hover:border-sky-600 transition">
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-3">
                <Avatar name={member.name} size="lg" />
                <div>
                  <h3 className="font-semibold text-base text-slate-100">{member.name}</h3>
                  <p className="text-xs text-slate-400">{member.role}</p>
                </div>
              </div>
              <Badge variant={member.status === "Busy" ? "rose" : "emerald"}>
                {member.status}
              </Badge>
            </div>

            <div className="flex items-center gap-2 text-xs text-slate-400">
              <EnvelopeIcon className="h-3.5 w-3.5 text-slate-500" />
              <span>{member.email}</span>
            </div>

            <div className="space-y-2 pt-2 border-t border-slate-800">
              <div className="flex justify-between text-xs">
                <span className="text-slate-400">Active Workload ({member.tasks} Tasks)</span>
                <span className={member.workload > 85 ? "text-rose-400 font-semibold" : "text-sky-400 font-semibold"}>
                  {member.workload}%
                </span>
              </div>
              <Progress
                value={member.workload}
                className={member.workload > 85 ? "bg-rose-950" : ""}
              />
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}