"use client";

import { useState } from "react";
import { Search, Video } from "lucide-react";

export function VideoPluginTab() {
  const [videoQuery, setVideoQuery] = useState("");
  const [searched, setSearched] = useState(false);

  function handleSearch() {
    if (!videoQuery.trim()) return;
    setSearched(true);
  }

  return (
    <div className="space-y-3">
      <div className="flex gap-2">
        <div className="relative flex-1">
          <label htmlFor="video-search-input" className="sr-only">Search videos</label>
          <input
            id="video-search-input"
            type="text"
            value={videoQuery}
            onChange={(e) => setVideoQuery(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
            placeholder="Search topics or chapters..."
            className="w-full rounded-xl border border-white/[0.1] bg-white/[0.04] px-3 py-2 pl-9 text-sm text-white outline-none placeholder:text-white/34 focus:border-white/[0.22]"
          />
          <Search className="pointer-events-none absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-white/34" />
        </div>
        <button
          type="button"
          onClick={handleSearch}
          className="inline-flex shrink-0 items-center gap-2 rounded-xl border border-white/[0.1] bg-white/[0.04] px-3 text-xs font-semibold text-white/64 transition hover:border-white/[0.18] hover:text-white"
        >
          Search
        </button>
      </div>

      <div className="rounded-2xl border border-dashed border-white/[0.08] px-4 py-8 text-center">
        <Video className="mx-auto size-8 text-white/24" />
        <p className="mt-3 text-sm font-semibold text-white/48">Video search isn&apos;t available yet</p>
        <p className="mt-1 text-xs text-white/34">
          {searched
            ? "Search isn't available yet. Open a chapter to find its lesson video where available, notes and practice."
            : "Open a chapter to find its lesson video where available, notes and practice."}
        </p>
      </div>
    </div>
  );
}