import React from 'react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../ui/table";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import { Plus } from "lucide-react";

export function MultipleOptionsView() {
  const options = [
    {
      id: 1,
      name: 'Prepped By',
      contents: 'A. Smith; B. Doe; C. Borne',
      lastEdited: '2025.12.03.11:45',
    },
    {
      id: 2,
      name: 'Checked By',
      contents: 'D. Manager; E. Supervisor',
      lastEdited: '2025.12.04.09:30',
    },
    {
      id: 3,
      name: 'Allergens',
      contents: 'Peanuts; Dairy; Gluten; Soy',
      lastEdited: '2025.12.05.14:15',
    },
  ];

  return (
    <div className="space-y-6">
      {/* Controls: Search, Location, New Multiple Options — 单行 + 圆角 + 细边框 + 统一高度 40px，黄色按钮无边框、靠右 */}
      <div className="flex flex-wrap items-center gap-3" style={{ height: 40 }}>
        <Input
          placeholder="Search"
          className="bg-white border border-black rounded-lg w-[180px] shrink-0 py-0 leading-normal"
          style={{ height: 40 }}
        />
        <Select defaultValue="all">
          <SelectTrigger
            className="bg-white border border-black rounded-lg w-[180px] shrink-0 py-0"
            style={{ height: 40 }}
          >
            <SelectValue placeholder="Location" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Locations</SelectItem>
            <SelectItem value="loc-a">Location A</SelectItem>
            <SelectItem value="loc-b">Location B</SelectItem>
          </SelectContent>
        </Select>
        <Button className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg px-6 border-0 shrink-0 ml-auto py-0 min-h-0" style={{ height: 40 }}>
          New Multiple Options <Plus className="ml-1 h-4 w-4" />
        </Button>
      </div>

      {/* Table */}
      <div className="rounded-md border bg-white shadow-sm">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50 hover:bg-gray-50">
              <TableHead className="font-bold text-gray-900 w-[250px]">Multiple Option Name</TableHead>
              <TableHead className="font-bold text-gray-900 w-[200px]">Contents</TableHead>
              <TableHead className="font-bold text-gray-900 pl-[120px]">Last Edited</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {options.map((item) => (
              <TableRow key={item.id} className="hover:bg-gray-50">
                <TableCell className="font-medium">{item.name}</TableCell>
                <TableCell className="text-gray-600">{item.contents}</TableCell>
                <TableCell className="text-gray-500 tabular-nums pl-[120px]">{item.lastEdited}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}