"use client";

import { useMemo, useState } from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const phrases = [
  { thai: "เท่าไหร่", zh: "多少錢？", context: "問價" },
  { thai: "แพงไป", zh: "太貴了", context: "議價" },
  { thai: "ลดหน่อยได้ไหม", zh: "可以便宜一點嗎？", context: "議價" },
  { thai: "ไปที่นี่", zh: "去這裡", context: "交通" },
  { thai: "ใกล้ที่สุด", zh: "最近的", context: "交通" },
  { thai: "ขอบคุณ", zh: "謝謝", context: "禮貌" },
  { thai: "ไม่เป็นไร", zh: "沒關係", context: "禮貌" },
  { thai: "ช่วยด้วย", zh: "救命／幫忙", context: "緊急" },
  { thai: "ตำรวจท่องเที่ยว", zh: "旅遊警察", context: "緊急" },
  { thai: "ห้องน้ำอยู่ไหน", zh: "洗手間在哪？", context: "實用" },
  { thai: "เปิดกี่โมง", zh: "幾點開門？", context: "實用" },
  { thai: "ปิดกี่โมง", zh: "幾點關門？", context: "實用" },
  { thai: "ขอเมนู", zh: "請給菜單", context: "酒吧" },
  { thai: "น้ำเปล่า", zh: "白開水", context: "酒吧" },
  { thai: "ไม่ดื่มแล้ว", zh: "不喝了", context: "酒吧" },
];

export function Phrasebook() {
  const [query, setQuery] = useState("");

  const filtered = useMemo(() => {
    if (!query) return phrases;
    return phrases.filter(
      (p) =>
        p.thai.includes(query) ||
        p.zh.includes(query) ||
        p.context.includes(query)
    );
  }, [query]);

  return (
    <div>
      <div className="relative max-w-md">
        <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          placeholder="搜尋泰文、中文或情境..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="pl-10"
        />
      </div>
      <div className="mt-4 overflow-x-auto rounded-xl border border-border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>泰文</TableHead>
              <TableHead>中文</TableHead>
              <TableHead>情境</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filtered.map((p) => (
              <TableRow key={p.thai}>
                <TableCell className="font-medium">{p.thai}</TableCell>
                <TableCell>{p.zh}</TableCell>
                <TableCell className="text-muted-foreground">{p.context}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}