"use client";

import React, { useState } from "react";
import { 
  Calendar, 
  Clock, 
  MonitorPlay, 
  MapPin, 
  ChevronDown, 
  ChevronRight,
  User,
  Briefcase
} from "lucide-react";
import Image from "next/image";

// Verified Badge component (orange circle with white check)
const VerifiedBadge = () => (
  <div className="w-4 h-4 bg-[#ff6b00] rounded-full flex items-center justify-center ml-2 flex-shrink-0">
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
  </div>
);

// const MOCK_INTERVIEWS: any[] = [];

const MOCK_INTERVIEWS = [
  {
    id: 1,
    jobTitle: "Flutter Developer",
    company: "ABCDFVGG Solution Pvt. Ltd.",
    isVerified: true,
    date: "25 Jul 2026",
    time: "10:30 AM",
    type: "Video Interview",
    location: "Bhubaneswar",
    round: "Technical Round",
    status: "Scheduled",
    logo: (
      <div className="w-[56px] h-[56px] rounded-2xl border border-gray-100 flex items-center justify-center bg-white shadow-sm">
        <span className="text-[#0052cc] font-black text-xl tracking-tighter">AB</span>
      </div>
    )
  },
  {
    id: 2,
    jobTitle: "Frontend Developer",
    company: "Tata Consultancy Services",
    isVerified: true,
    date: "27 Jul 2026",
    time: "02:00 PM",
    type: "In-person",
    location: "Hyderabad",
    round: "HR Round",
    status: "Scheduled",
    logo: (
      <div className="w-[56px] h-[56px] rounded-2xl border border-gray-100 flex items-center justify-center bg-white shadow-sm flex-col pb-1">
        <span className="text-red-500 font-bold text-xl leading-none">tcs</span>
        <span className="text-[5px] text-blue-500 font-bold mt-0.5 text-center leading-tight tracking-wider">TATA<br/>CONSULTANCY<br/>SERVICES</span>
      </div>
    )
  },
  {
    id: 3,
    jobTitle: "Software Engineer",
    company: "Microsoft India",
    isVerified: true,
    date: "18 Jul 2026",
    time: "11:00 AM",
    type: "Video Interview",
    location: "Bangalore",
    round: "Technical Round",
    status: "Completed",
    logo: (
      <div className="w-[56px] h-[56px] rounded-2xl border border-gray-100 flex items-center justify-center bg-white shadow-sm">
        <div className="grid grid-cols-2 gap-[2px] w-7 h-7">
          <div className="bg-[#f25022]"></div>
          <div className="bg-[#7fba00]"></div>
          <div className="bg-[#00a4ef]"></div>
          <div className="bg-[#ffb900]"></div>
        </div>
      </div>
    )
  },
  {
    id: 4,
    jobTitle: "Backend Developer",
    company: "Amazon Development Centre",
    isVerified: true,
    date: "12 Jul 2026",
    time: "03:30 PM",
    type: "Video Interview",
    location: "Pune",
    round: "Technical Round",
    status: "Completed",
    logo: (
      <div className="w-[56px] h-[56px] rounded-2xl border border-gray-100 flex items-center justify-center bg-white shadow-sm relative">
        <span className="text-black font-extrabold text-4xl mb-2">a</span>
        <div className="absolute bottom-2 w-6 h-1.5 border-b-2 border-r-2 border-[#ff9900] rounded-br-[100%] transform -rotate-[15deg]"></div>
      </div>
    )
  },
  {
    id: 5,
    jobTitle: "Associate Consultant",
    company: "Infosys Limited",
    isVerified: true,
    date: "08 Jul 2026",
    time: "04:00 PM",
    type: "In-person",
    location: "Mysuru",
    round: "HR Round",
    status: "Cancelled",
    logo: (
      <div className="w-[56px] h-[56px] rounded-2xl border border-gray-100 flex items-center justify-center bg-white shadow-sm">
        <span className="text-[#007cc3] font-medium text-lg tracking-tight">Infosys</span>
      </div>
    )
  }
];

export default function InterviewsPage() {
  const [activeTab, setActiveTab] = useState("All");
  const [sortOrder, setSortOrder] = useState<"newest" | "oldest">("newest");
  const [isSortOpen, setIsSortOpen] = useState(false);
  
  const tabs = ["All", "Scheduled", "Completed", "Cancelled"];

  const filteredInterviews = MOCK_INTERVIEWS.filter(interview => {
    if (activeTab === "All") return true;
    return interview.status === activeTab;
  }).sort((a, b) => {
    const dateA = new Date(a.date).getTime();
    const dateB = new Date(b.date).getTime();
    return sortOrder === "newest" ? dateB - dateA : dateA - dateB;
  });

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "Scheduled":
        return (
          <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-[#fff4ed] text-[#ff6b00] text-[12px] font-semibold">
            <div className="w-2 h-2 rounded-full bg-[#ff6b00]"></div>
            Scheduled
          </div>
        );
      case "Completed":
        return (
          <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-[#ecfdf3] text-[#039855] text-[12px] font-semibold">
            <div className="w-2 h-2 rounded-full border-2 border-[#039855]"></div>
            Completed
          </div>
        );
      case "Cancelled":
        return (
          <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-[#fef3f2] text-[#d92d20] text-[12px] font-semibold">
            <div className="w-2 h-2 rounded-full bg-[#d92d20]"></div>
            Cancelled
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="p-6 md:p-8 max-w-5xl mx-auto w-full">
      <div className="mb-8">
        <h1 className="text-[28px] font-bold text-gray-900 mb-1">Interviews</h1>
        <p className="text-gray-600 text-[15px]">Track your interview details and status</p>
      </div>

      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
        <div className="flex items-center gap-3 overflow-x-auto pb-2 sm:pb-0 w-full sm:w-auto">
          {tabs.map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`px-4 py-1.5 rounded-xl text-[13px] font-semibold whitespace-nowrap transition-colors ${
                activeTab === tab
                  ? "bg-white text-[#ff6b00] border border-[#ff6b00] shadow-sm"
                  : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-50"
              }`}
            >
              {tab}
            </button>
          ))}
        </div>

        <div className="flex items-center gap-3 shrink-0 relative">
          <span className="text-sm font-semibold text-gray-700">Sort by:</span>
          <button 
            onClick={() => setIsSortOpen(!isSortOpen)}
            className="flex items-center justify-between gap-2 px-3 py-1.5 bg-white border border-gray-200 rounded-xl text-[13px] font-semibold text-gray-800 hover:bg-gray-50 transition-colors shadow-sm w-[130px]"
          >
            {sortOrder === "newest" ? "Newest First" : "Oldest First"}
            <ChevronDown className="w-4 h-4 text-gray-500" />
          </button>
          
          {isSortOpen && (
            <div className="absolute top-full right-0 mt-2 w-[130px] bg-white border border-gray-100 rounded-xl shadow-lg z-10 overflow-hidden">
              <button 
                onClick={() => { setSortOrder("newest"); setIsSortOpen(false); }}
                className="w-full text-left px-4 py-2.5 text-[13px] font-medium text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors"
              >
                Newest First
              </button>
              <button 
                onClick={() => { setSortOrder("oldest"); setIsSortOpen(false); }}
                className="w-full text-left px-4 py-2.5 text-[13px] font-medium text-gray-700 hover:bg-gray-50 hover:text-orange-500 transition-colors"
              >
                Oldest First
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="flex flex-col gap-5">
        {filteredInterviews.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <Image src="/images/noInterview.png" alt="No AI interviews" width={240} height={240} className="mb-6 object-contain" />
            <h3 className="text-xl font-bold text-gray-900 mb-2">No AI interviews yet</h3>
            <p className="text-sm text-gray-500 mb-6 max-w-xs">
              Apply to jobs with AI interviews enabled to get started.
            </p>
            <button className="flex items-center gap-2 bg-[#ff6b00] hover:bg-[#e66000] text-white px-6 py-2.5 rounded-lg text-sm font-semibold transition-colors">
              <Briefcase className="w-4 h-4" />
              Explore Jobs
            </button>
          </div>
        ) : (
          filteredInterviews.map((interview) => (
          <div key={interview.id} className="bg-white rounded-2xl p-4 shadow-[0_2px_12px_rgba(0,0,0,0.03)] border border-gray-100 hover:shadow-md transition-shadow">
            <div className="flex flex-col sm:flex-row gap-4 items-start">
              {/* Logo */}
              <div className="flex-shrink-0">
                {interview.logo}
              </div>

              {/* Content */}
              <div className="flex-1 flex flex-col min-w-0 w-full">
                <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
                  <div>
                    <h3 className="text-[15px] font-bold text-gray-900 leading-tight mb-1">{interview.jobTitle}</h3>
                    <div className="flex items-center">
                      <span className="text-[13px] text-gray-600 font-semibold">{interview.company}</span>
                      {interview.isVerified && <VerifiedBadge />}
                    </div>
                  </div>
                  <div className="hidden sm:block">
                    {getStatusBadge(interview.status)}
                  </div>
                </div>

                <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-3">
                  <div className="flex items-center gap-2 text-[13px] font-medium text-gray-600">
                    <Calendar className="w-3.5 h-3.5 text-gray-400" />
                    <span>{interview.date}</span>
                  </div>
                  <div className="flex items-center gap-2 text-[13px] font-medium text-gray-600">
                    <Clock className="w-3.5 h-3.5 text-gray-400" />
                    <span>{interview.time}</span>
                  </div>
                  <div className="flex items-center gap-2 text-[13px] font-medium text-gray-600">
                    {interview.type === "In-person" ? (
                      <User className="w-3.5 h-3.5 text-gray-400" />
                    ) : (
                      <MonitorPlay className="w-3.5 h-3.5 text-gray-400" />
                    )}
                    <span>{interview.type}</span>
                  </div>
                  <div className="flex items-center gap-2 text-[13px] font-medium text-gray-600">
                    <MapPin className="w-3.5 h-3.5 text-gray-400" />
                    <span>{interview.location}</span>
                  </div>
                </div>

                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mt-4">
                  <div className="text-[13px] font-medium text-gray-500">
                    Interview Round: <span className="text-gray-700 font-semibold">{interview.round}</span>
                  </div>
                  
                  <div className="flex items-center justify-between w-full sm:w-auto gap-4">
                    <div className="sm:hidden">
                      {getStatusBadge(interview.status)}
                    </div>
                    <button className="flex items-center gap-2 px-4 py-1.5 bg-white border border-gray-300 rounded-lg text-[13px] font-bold text-gray-800 hover:bg-gray-50 transition-all sm:ml-auto">
                      View Details
                      <ChevronRight className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )))}
      </div>
    </div>
  );
}