"use client";

import { useState, useEffect, useMemo } from "react";
import { Search, Building2, Mail, MessageSquare, Users, User } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { fetchEmployees, fetchDepartments } from "@/lib/supabase/employees-actions";
import { createOrFindConversation } from "@/lib/supabase/comms-actions";
import type { EmployeeWithRelations, Department } from "@/lib/supabase/employees-types";
import PageSkeleton from "./PageSkeleton";

const AVATAR_COLORS = ["bg-teal-500", "bg-blue-500", "bg-purple-500", "bg-orange-500", "bg-pink-500"];

function getInitials(firstName: string, lastName: string): string {
  return `${firstName[0]}${lastName[0]}`.toUpperCase();
}

export default function DirectoryPage() {
  const [employees, setEmployees] = useState<EmployeeWithRelations[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedDept, setSelectedDept] = useState<string>("all");

  useEffect(() => {
    let cancelled = false;
    Promise.all([fetchEmployees(), fetchDepartments()])
      .then(([emps, depts]) => {
        if (!cancelled) {
          // Only show active employees in directory
          setEmployees(emps.filter(e => e.status === 'active'));
          setDepartments(depts);
        }
      })
      .catch((err) => {
        console.error("Failed to load directory:", err);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => { cancelled = true; };
  }, []);

  const filteredEmployees = useMemo(() => {
    return employees.filter((emp) => {
      const matchesSearch = 
        `${emp.first_name} ${emp.last_name}`.toLowerCase().includes(searchQuery.toLowerCase()) ||
        emp.job_title?.toLowerCase().includes(searchQuery.toLowerCase());
      
      const matchesDept = selectedDept === "all" || emp.department_id === selectedDept;
      
      return matchesSearch && matchesDept;
    });
  }, [employees, searchQuery, selectedDept]);

  const handleMessage = async (userId: string) => {
    if (!userId) return;
    try {
      // In a real app, this would trigger navigation to Comms with this user
      // For now, we just find/create the conversation
      await createOrFindConversation(userId);
      // We'd need to tell AppShell to switch to Comms, but for now we just log
      console.log("Messaging user:", userId);
      // If AppShell was accessible via context, we'd call a navigate function here
    } catch (err) {
      console.error("Failed to start conversation:", err);
    }
  };

  if (loading) return <PageSkeleton name="Directory" />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      <div>
        <h1 className="text-3xl font-serif font-bold text-gray-900">Directory</h1>
        <p className="text-gray-500 mt-1">Connect with your teammates across the organisation</p>
      </div>

      <div className="flex flex-col sm:flex-row gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <Input
            placeholder="Search by name or title..."
            className="pl-10 h-10"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <select
          value={selectedDept}
          onChange={(e) => setSelectedDept(e.target.value)}
          className="h-10 px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent bg-white min-w-[160px]"
        >
          <option value="all">All Departments</option>
          {departments.map((dept) => (
            <option key={dept.id} value={dept.id}>{dept.name}</option>
          ))}
        </select>
      </div>

      {filteredEmployees.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-20 bg-white rounded-xl border border-dashed border-gray-300">
          <Users className="w-12 h-12 text-gray-200 mb-3" />
          <p className="text-sm font-medium text-gray-900">No teammates found</p>
          <p className="text-xs text-gray-400 mt-1">Try adjusting your search or filters</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {filteredEmployees.map((emp, i) => {
            const initials = getInitials(emp.first_name, emp.last_name);
            const colorClass = AVATAR_COLORS[i % AVATAR_COLORS.length];
            
            return (
              <Card key={emp.id} className="border-0 shadow-sm hover:shadow-md transition-all duration-300 group">
                <CardContent className="p-6">
                  <div className="flex flex-col items-center text-center space-y-4">
                    <div className={`w-20 h-20 rounded-full ${colorClass} flex items-center justify-center text-white text-2xl font-bold shadow-sm transition-transform duration-300 group-hover:scale-110`}>
                      {initials}
                    </div>
                    
                    <div className="space-y-1">
                      <h3 className="text-base font-semibold text-gray-900 leading-tight">
                        {emp.first_name} {emp.last_name}
                      </h3>
                      <p className="text-xs text-gray-500 font-medium">{emp.job_title || "Team Member"}</p>
                    </div>

                    <div className="flex flex-wrap justify-center gap-2 pt-1">
                      {emp.department && (
                        <Badge variant="secondary" className="bg-teal-50 text-teal-700 hover:bg-teal-100 border-0 text-[10px]">
                          <Building2 className="w-3 h-3 mr-1" />
                          {emp.department.name}
                        </Badge>
                      )}
                    </div>

                    <div className="w-full pt-4 space-y-2">
                      <a 
                        href={`mailto:${emp.email}`}
                        className="flex items-center justify-center gap-2 w-full py-2 text-xs font-medium text-teal-600 bg-teal-50 rounded-lg hover:bg-teal-100 transition-colors"
                      >
                        <Mail className="w-3.5 h-3.5" />
                        {emp.email}
                      </a>
                      
                      {emp.user_id && (
                        <button
                          onClick={() => handleMessage(emp.user_id!)}
                          className="flex items-center justify-center gap-2 w-full py-2 text-xs font-medium text-gray-600 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
                        >
                          <MessageSquare className="w-3.5 h-3.5" />
                          Message
                        </button>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}