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 LabelsList() {
  const labels = [
    {
      id: 1,
      location: 'Location A',
      labelCategory: 'Prep',
      productCategory: 'Meat',
      product: 'Chicken',
      template: '2"x2" Basic',
      labelType: 'Defrost',
      lastEdited: '2025.12.03.11:45',
      hasError: false
    },
    {
      id: 2,
      location: 'Location A',
      labelCategory: 'Prep',
      productCategory: 'Meat',
      product: 'Chicken',
      template: '2"x2" Basic',
      labelType: 'Opened/Preped',
      lastEdited: '2025.12.03.11:45',
      hasError: false
    },
    {
      id: 3,
      location: 'Location A',
      labelCategory: 'Prep',
      productCategory: 'Meat',
      product: 'Chicken',
      template: '2"x2" Basic',
      labelType: 'Heated',
      lastEdited: '2025.12.03.11:45',
      hasError: false
    },
    {
      id: 4,
      location: 'Location A',
      labelCategory: "Grab'n'Go",
      productCategory: 'Sandwich',
      product: 'Chicken Sandwich',
      template: '2"x6" G\'n\'G',
      labelType: '',
      lastEdited: '2025.12.03.11:45',
      hasError: true
    },
  ];

  return (
    <div className="space-y-6">
      {/* Controls: Search, Location, Bulk Actions & New Label — 单行 + 圆角 + 细边框 + 统一高度 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>
        <div
          className="flex items-stretch rounded-lg overflow-hidden border border-black shrink-0"
          style={{ height: 40 }}
        >
          <Button variant="outline" className="border-0 border-r border-black rounded-none flex-1 py-0 h-full min-h-0 bg-white hover:bg-gray-100 text-black font-normal px-6">
            Bulk Import
          </Button>
          <Button variant="outline" className="border-0 border-r border-black rounded-none flex-1 py-0 h-full min-h-0 bg-white hover:bg-gray-100 text-black font-normal px-6">
            Bulk Export
          </Button>
          <Button variant="outline" className="border-0 rounded-none flex-1 py-0 h-full min-h-0 bg-white hover:bg-gray-100 text-black font-normal px-6">
            Bulk Edit
          </Button>
        </div>
        <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 Label <Plus className="ml-1 h-4 w-4" />
        </Button>
      </div>

      {/* Warning Text */}
      <div className="text-red-600 font-bold italic text-lg">
        One or more of your labels are missing fields from their templates (! ! ! 1 in total).
      </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-[120px]">Location</TableHead>
              <TableHead className="font-bold text-gray-900 w-[140px]">Label Category</TableHead>
              <TableHead className="font-bold text-gray-900 w-[140px]">Product Category</TableHead>
              <TableHead className="font-bold text-gray-900">Product</TableHead>
              <TableHead className="font-bold text-gray-900">Template</TableHead>
              <TableHead className="font-bold text-gray-900">Label Type</TableHead>
              <TableHead className="font-bold text-gray-900">Last Edited</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {labels.map((label) => (
              <TableRow key={label.id} className="hover:bg-gray-50">
                <TableCell className="font-medium">{label.location}</TableCell>
                <TableCell>{label.labelCategory}</TableCell>
                <TableCell>{label.productCategory}</TableCell>
                <TableCell>{label.product}</TableCell>
                <TableCell className="font-medium">
                  {label.template}
                  {label.hasError && (
                    <span className="text-red-600 font-bold ml-2">! ! !</span>
                  )}
                </TableCell>
                <TableCell>{label.labelType || '-'}</TableCell>
                <TableCell className="text-gray-500 tabular-nums">{label.lastEdited}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}