"use client";

import React, { useState } from "react";
import { Search, MonitorPlay, Code, Users, Settings, Database, Loader2 } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/services/api";
import { PrepCard } from "./PrepCard";

interface PrepItem {
  id: number | string;
  title: string;
  questions: number;
  mins: number;
  icon: React.ReactNode;
}

const MOCK_PREPS: PrepItem[] = [
  { id: 1, title: "Frontend Developer", questions: 20, mins: 20, icon: <img src="/images/ai7.png" alt="Frontend Developer" className="w-10 h-10 object-contain" /> },
  { id: 2, title: "Backend Developer", questions: 20, mins: 20, icon: <img src="/images/ai2.png" alt="Backend Developer" className="w-10 h-10 object-contain" /> },
  { id: 3, title: "Full stack Developer", questions: 20, mins: 20, icon: <img src="/images/ai3.png" alt="Full stack Developer" className="w-10 h-10 object-contain" /> },
  { id: 4, title: "Frontend Developer", questions: 20, mins: 20, icon: <img src="/images/ai4.png" alt="Frontend Developer" className="w-10 h-10 object-contain" /> },
  { id: 5, title: "Frontend Developer", questions: 20, mins: 20, icon: <img src="/images/ai5.png" alt="Frontend Developer" className="w-10 h-10 object-contain" /> },
  { id: 6, title: "Frontend Developer", questions: 20, mins: 20, icon: <img src="/images/ai6.png" alt="Frontend Developer" className="w-10 h-10 object-contain" /> },
  { id: 7, title: "Frontend Developer", questions: 20, mins: 20, icon: <img src="/images/ai7.png" alt="Frontend Developer" className="w-10 h-10 object-contain" /> },
  { id: 8, title: "Human Resource", questions: 20, mins: 20, icon: <img src="/images/ai2.png" alt="Human Resource" className="w-10 h-10 object-contain" /> },
];

export function InterviewPrepClient() {
  const [searchQuery, setSearchQuery] = useState("");

  const { data: templates = [], isLoading } = useQuery({
    queryKey: ['mockTemplates'],
    queryFn: () => api.get('/admin/mock-templates').then(res => res.data?.data || [])
  });

  // Convert fetched templates to our format, fallback to mock data if empty
  const activePreps: PrepItem[] = templates.length > 0 ? templates.map((t: any, index: number) => {
    const imgIndex = (index % 6) + 1; // cycles from 1 to 6
    return {
      id: t.id,
      title: t.title,
      questions: t.total_questions,
      mins: t.duration_minutes,
      icon: <img src={`/images/ai${imgIndex}.png`} alt={t.title} className="w-10 h-10 object-contain" />
    };
  }) : MOCK_PREPS;

  const filteredPreps = activePreps.filter(prep => 
    prep.title.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="bg-[#f8f9fa] w-full min-h-screen pb-20 relative z-10 -mt-16 rounded-t-[3rem] lg:rounded-t-[4rem]">
      <div className="container mx-auto px-6 pt-10 flex justify-center">
        <div className="w-full max-w-5xl">
          <h2 className="text-2xl lg:text-[24px] font-semibold text-gray-800 mb-6">
            Find The Perfect Prep For You
          </h2>
          
          <div className="relative w-full mb-10 shadow-sm rounded-xl overflow-hidden bg-white">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              type="text"
              placeholder="Search for role (e.g Frontend Developer)......."
              className="w-full h-12 pl-12 pr-4 border border-gray-200 rounded-xl outline-none focus:border-[#fc6123] focus:ring-1 focus:ring-[#fc6123] transition-all text-gray-700 text-sm"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 w-full">
            {isLoading ? (
              <div className="col-span-full flex flex-col items-center justify-center py-20 text-gray-500">
                <Loader2 className="w-10 h-10 animate-spin text-[#fc6123] mb-4" />
                <p className="font-medium">Loading templates from server...</p>
              </div>
            ) : filteredPreps.map((prep) => (
              <PrepCard
                key={prep.id}
                id={prep.id}
                title={prep.title}
                questions={prep.questions}
                mins={prep.mins}
                icon={prep.icon}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}