"use client";

import { getCandidateTableColumns } from "@/data/source/candidates";
import type { CandidateRow, CandidateTab } from "@/types/candidate";
import { ArrowLeft, User } from "lucide-react";
import Link from "next/link";
import { useCallback, useMemo, useState } from "react";
import CandidatesCardToolbar from "./candidates-card-toolbar";
import CandidatesFilledPanel from "./candidates-filled-panel";
import ScheduleInterviewDialog from "./schedule-interview-dialog";

type Props = {
  app: string;
  data: CandidateRow[];
};

export default function CandidatesPageBody({ app, data }: Props) {
  const [search, setSearch] = useState("");
  const [activeTab, setActiveTab] = useState<CandidateTab>("applied");
  const [scheduleCandidate, setScheduleCandidate] = useState<CandidateRow | null>(null);

  const handleScheduleInterview = useCallback((row: CandidateRow) => {
    setScheduleCandidate(row);
  }, []);

  const columns = useMemo(
    () =>
      getCandidateTableColumns(app, {
        tab: activeTab,
        onScheduleInterview: handleScheduleInterview,
      }),
    [app, activeTab, handleScheduleInterview],
  );

  const filtered = useMemo(() => {
    let rows = data.filter((r) => r.tab === activeTab);
    const q = search.trim().toLowerCase();
    if (q) {
      rows = rows.filter(
        (r) =>
          r.name.toLowerCase().includes(q) ||
          r.email.toLowerCase().includes(q) ||
          r.appliedFor.toLowerCase().includes(q) ||
          r.mobile.toLowerCase().includes(q) ||
          (r.availableTimings?.toLowerCase().includes(q) ?? false) ||
          (r.scheduledDateRange?.toLowerCase().includes(q) ?? false) ||
          (r.scheduledTimeRange?.toLowerCase().includes(q) ?? false) ||
          (r.scheduleOutcome?.toLowerCase().includes(q) ?? false),
      );
    }
    return rows;
  }, [data, activeTab, search]);

  const pageHeader = (
    <div className="flex items-center gap-2.5">
      <Link
        href={`/${app}/dashboard`}
        className="inline-flex shrink-0 rounded bg-white p-2 text-[#383E49] shadow-sm ring-1 ring-gray-100 hover:bg-[#F9FAFB]"
        aria-label="Back to dashboard"
      >
        <ArrowLeft className="size-4" aria-hidden />
      </Link>
      <h1 className="text-xl font-bold leading-snug text-[#45464E] sm:text-[30px] sm:font-semibold sm:text-[#272833]">
        All Candidates
      </h1>
    </div>
  );

  const cardShell = "rounded-xl border border-gray-100 bg-white p-6 shadow-sm";

  if (data.length === 0) {
    return (
      <div className="space-y-6">
        {pageHeader}
        <div className={cardShell}>
          <CandidatesCardToolbar searchValue={search} onSearchChange={setSearch} />
          <div className="flex min-h-[280px] flex-col items-center justify-center gap-9 py-6 sm:min-h-[320px] sm:py-10">
            <div className="flex size-[123px] shrink-0 items-center justify-center rounded-full border border-[#E1E2E9] bg-[#F4F5FA]">
              <User className="size-[52px] text-[#383E49]" strokeWidth={1.25} aria-hidden />
            </div>
            <div className="flex max-w-sm flex-col items-center text-center">
              <div className="space-y-2.5">
                <p className="text-lg font-bold text-[#1A1A1A]">No Candidate Added</p>
                <p className="text-base text-[#8C8C8C]">Add More Job For Candidate.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {pageHeader}
      <div className={cardShell}>
        <h2 className="mb-6 text-lg font-bold text-[#383E49]">Candidate</h2>
        <CandidatesFilledPanel
          data={filtered}
          columns={columns}
          activeTab={activeTab}
          onTabChange={setActiveTab}
          searchValue={search}
          onSearchChange={setSearch}
        />
      </div>
      <ScheduleInterviewDialog
        open={scheduleCandidate !== null}
        onOpenChange={(open) => {
          if (!open) setScheduleCandidate(null);
        }}
        candidate={scheduleCandidate}
      />
    </div>
  );
}