王明 / Food-Labeling-Management-Platform

import React, { useState } from 'react';
import { Search, Plus, Link2, History, Upload, Download, Edit } from 'lucide-react';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../ui/select';
import { Label } from '../ui/label';
import { Switch } from '../ui/switch';

// --- Types & Rules ---
// 1. 新增设备必须与 Location 绑定
// 2. Sensor（温度湿度传感器）可批量绑定/导入/导出/编辑
// 3. E-label（电子标签）可批量绑定/导入/导出/编辑
// 4. 后台可查看所有设备运行状况；打印机可查看剩余打印米数及充值记录
// 5. Printer、Scale 可批量导入/导出/编辑
// 6. 已创建捆绑的设备可编辑为 Active/Inactive

export type DeviceCategory = 'Printer' | 'Sensor' | 'Scale' | 'E-label';

export interface RechargeRecord {
  id: string;
  date: string;
  amount: string; // e.g. "100 meters"
  note?: string;
}

export interface Device {
  id: string;
  locationId: string;
  category: DeviceCategory;
  device: string;
  deviceId: string;
  balance: string; // 打印机剩余米数，其他类型为空
  status: 'Online' | 'Offline';
  active: boolean; // Active / Inactive
  rechargeRecords?: RechargeRecord[]; // 打印机充值记录
}

const MOCK_LOCATIONS = [
  { id: '12345', name: 'Location 12345 - Downtown' },
  { id: '67890', name: 'Location 67890 - Uptown' },
];

const CATEGORY_LABELS: Record<DeviceCategory, string> = {
  Printer: 'Printer',
  Sensor: 'Sensor (Temp. & Humidity)',
  Scale: 'Scale',
  'E-label': 'E-label (Electronic Label)',
};

const INITIAL_DEVICES: Device[] = [
  { id: '1', locationId: '12345', category: 'Printer', device: 'printer 1', deviceId: '123456789', balance: '51 meters', status: 'Online', active: true, rechargeRecords: [{ id: 'r1', date: '2025-01-15', amount: '200 meters', note: 'Initial' }, { id: 'r2', date: '2025-02-01', amount: '100 meters' }] },
  { id: '2', locationId: '12345', category: 'Printer', device: 'printer2', deviceId: '113456789', balance: '155 meters', status: 'Online', active: true, rechargeRecords: [{ id: 'r3', date: '2025-01-20', amount: '300 meters' }] },
  { id: '3', locationId: '12345', category: 'Sensor', device: 'sensor 1', deviceId: '103456789', balance: '', status: 'Online', active: true },
  { id: '4', locationId: '12345', category: 'Sensor', device: 'sensor 2', deviceId: '093456789', balance: '', status: 'Online', active: true },
  { id: '5', locationId: '12345', category: 'Sensor', device: 'sensor 3', deviceId: '083456789', balance: '', status: 'Online', active: false },
  { id: '6', locationId: '12345', category: 'Scale', device: 'Scale 1', deviceId: '073456789', balance: '', status: 'Online', active: true },
  { id: '7', locationId: '12345', category: 'E-label', device: 'e-label 1', deviceId: '063456789', balance: '', status: 'Online', active: true },
  { id: '8', locationId: '12345', category: 'E-label', device: 'e-label 2', deviceId: '053456789', balance: '', status: 'Online', active: true },
  { id: '9', locationId: '12345', category: 'E-label', device: 'e-label 3', deviceId: '043456789', balance: '', status: 'Offline', active: true },
  { id: '10', locationId: '12345', category: 'E-label', device: 'e-label 4', deviceId: '033456789', balance: '', status: 'Offline', active: false },
  { id: '11', locationId: '12345', category: 'E-label', device: 'e-label 5', deviceId: '023456789', balance: '', status: 'Online', active: true },
  { id: '12', locationId: '12345', category: 'E-label', device: 'e-label 6', deviceId: '013456789', balance: '', status: 'Online', active: true },
  { id: '13', locationId: '12345', category: 'E-label', device: 'e-label 7', deviceId: '003456789', balance: '', status: 'Online', active: true },
];

export function DevicesView() {
  const [search, setSearch] = useState('');
  const [devices, setDevices] = useState<Device[]>(INITIAL_DEVICES);
  const [filterCategory, setFilterCategory] = useState<string>('all');
  const [newDialogOpen, setNewDialogOpen] = useState(false);
  const [rechargeDialogDevice, setRechargeDialogDevice] = useState<Device | null>(null);

  // 新增设备：必须与 Location 绑定
  const [newLocationId, setNewLocationId] = useState('');
  const [newCategory, setNewCategory] = useState<DeviceCategory>('Printer');
  const [newDeviceName, setNewDeviceName] = useState('');
  const [newDeviceId, setNewDeviceId] = useState('');

  const filteredDevices = devices.filter((d) => {
    const matchSearch = !search || d.device.toLowerCase().includes(search.toLowerCase()) || d.deviceId.includes(search);
    const matchCategory = filterCategory === 'all' || d.category === filterCategory;
    return matchSearch && matchCategory;
  });

  const handleAddDevice = () => {
    if (!newLocationId.trim()) return; // 规则1：必须选择 Location
    const loc = MOCK_LOCATIONS.find((l) => l.id === newLocationId);
    setDevices((prev) => [
      ...prev,
      {
        id: String(prev.length + 1),
        locationId: newLocationId,
        category: newCategory,
        device: newDeviceName || `${newCategory} ${prev.filter((d) => d.category === newCategory).length + 1}`,
        deviceId: newDeviceId || String(100000000 + prev.length),
        balance: newCategory === 'Printer' ? '0 meters' : '',
        status: 'Online',
        active: true,
        rechargeRecords: newCategory === 'Printer' ? [] : undefined,
      },
    ]);
    setNewLocationId('');
    setNewCategory('Printer');
    setNewDeviceName('');
    setNewDeviceId('');
    setNewDialogOpen(false);
  };

  const toggleActive = (id: string) => {
    setDevices((prev) => prev.map((d) => (d.id === id ? { ...d, active: !d.active } : d)));
  };

  const canBulkBind = filterCategory === 'Sensor' || filterCategory === 'E-label';
  const canBulkImportExportEdit = ['Printer', 'Scale', 'Sensor', 'E-label'].includes(filterCategory) || filterCategory === 'all';

  return (
    <div className="h-full flex flex-col bg-white">
      {/* Toolbar：与 Products 一致样式 — Search 在前，Partner/Group/Location/Device Category 下拉，右侧 Bulk 与 New+ */}
      <div className="border-b border-gray-200 py-4 bg-gray-50">
        <div className="flex flex-nowrap items-center gap-2 overflow-x-auto min-w-0">
          <div className="relative w-32 shrink-0">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9 h-9 rounded-lg border border-black bg-white text-black"
            />
          </div>
          <Select defaultValue="partner-a">
            <SelectTrigger className="w-[140px] h-9 rounded-lg border border-black font-medium text-black bg-white shrink-0">
              <SelectValue placeholder="Partner" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="partner-a">Partner A</SelectItem>
            </SelectContent>
          </Select>
          <Select defaultValue="group-b">
            <SelectTrigger className="w-[140px] h-9 rounded-lg border border-black font-medium text-black bg-white shrink-0">
              <SelectValue placeholder="Group" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="group-b">Group B</SelectItem>
            </SelectContent>
          </Select>
          <Select defaultValue="loc-12345">
            <SelectTrigger className="w-[160px] h-9 rounded-lg border border-black font-medium text-black bg-white shrink-0">
              <SelectValue placeholder="Location" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="loc-12345">Location 12345</SelectItem>
              <SelectItem value="67890">Location 67890 - Uptown</SelectItem>
            </SelectContent>
          </Select>
          <Select value={filterCategory} onValueChange={setFilterCategory}>
            <SelectTrigger className="w-[180px] h-9 rounded-lg border border-black font-medium text-black bg-white shrink-0">
              <SelectValue placeholder="Device Category" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Device Category (All)</SelectItem>
              <SelectItem value="Printer">Printer</SelectItem>
              <SelectItem value="Sensor">Sensor (Temp. & Humidity)</SelectItem>
              <SelectItem value="Scale">Scale</SelectItem>
              <SelectItem value="E-label">E-label (Electronic Label)</SelectItem>
            </SelectContent>
          </Select>
          <div className="flex-1 min-w-0" />
          {canBulkBind && (
            <Button variant="outline" className="h-9 rounded-lg border border-black text-black gap-2 bg-white hover:bg-gray-50 shrink-0">
              <Link2 className="w-4 h-4" /> Bulk Bind
            </Button>
          )}
          {canBulkImportExportEdit && (
            <>
              <Button variant="outline" className="h-9 rounded-lg border border-black text-black gap-2 bg-white hover:bg-gray-50 shrink-0">
                <Upload className="w-4 h-4" /> Bulk Import
              </Button>
              <Button variant="outline" className="h-9 rounded-lg border border-black text-black gap-2 bg-white hover:bg-gray-50 shrink-0">
                <Download className="w-4 h-4" /> Bulk Export
              </Button>
              <Button variant="outline" className="h-9 rounded-lg border border-black text-black gap-2 bg-white hover:bg-gray-50 shrink-0">
                <Edit className="w-4 h-4" /> Bulk Edit
              </Button>
            </>
          )}
          <Button className="h-9 rounded-lg bg-blue-600 text-white hover:bg-blue-700 font-medium gap-1 border-0 shrink-0" onClick={() => setNewDialogOpen(true)}>
            New+ <Plus className="w-4 h-4" />
          </Button>
        </div>
      </div>

      {/* Content Area：与 Products 一致 — 无内边距、bg-gray-50，表格包在白色圆角框内 */}
      <div className="flex-1 overflow-auto bg-gray-50">
        <div className="bg-white border border-gray-200 shadow-sm rounded-sm overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow className="bg-gray-100 hover:bg-gray-100">
                <TableHead className="font-bold text-gray-900 border-r">Location ID</TableHead>
                <TableHead className="font-bold text-gray-900 border-r">Device Category</TableHead>
                <TableHead className="font-bold text-gray-900 border-r">Device</TableHead>
                <TableHead className="font-bold text-gray-900 border-r">Device ID</TableHead>
                <TableHead className="font-bold text-gray-900 border-r">Balance</TableHead>
                <TableHead className="font-bold text-gray-900 border-r">Recharge</TableHead>
                <TableHead className="font-bold text-gray-900 border-r">Running Status</TableHead>
                <TableHead className="font-bold text-gray-900 text-center">Active</TableHead>
              </TableRow>
            </TableHeader>
          <TableBody>
            {filteredDevices.map((row) => (
              <TableRow key={row.id} className="hover:bg-gray-50">
                <TableCell className="text-gray-700">{row.locationId}</TableCell>
                <TableCell>
                  <span className={row.category === 'Printer' ? 'text-red-600' : 'text-gray-700'}>
                    {CATEGORY_LABELS[row.category]}
                  </span>
                </TableCell>
                <TableCell>
                  <span className={row.category === 'Printer' ? 'text-red-600' : 'text-gray-700'}>
                    {row.device}
                  </span>
                </TableCell>
                <TableCell className="text-gray-700">{row.deviceId}</TableCell>
                <TableCell className="text-gray-700">{row.balance || '—'}</TableCell>
                <TableCell>
                  {row.category === 'Printer' ? (
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-8 text-blue-600 hover:text-blue-800"
                      onClick={() => setRechargeDialogDevice(row)}
                    >
                      <History className="w-4 h-4 mr-1" />
                      View
                    </Button>
                  ) : (
                    '—'
                  )}
                </TableCell>
                <TableCell>
                  <span className={row.status === 'Offline' ? 'text-red-600' : 'text-green-600'}>
                    {row.status}
                  </span>
                </TableCell>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Switch
                      checked={row.active}
                      onCheckedChange={() => toggleActive(row.id)}
                    />
                    <span className="text-sm text-gray-600">{row.active ? 'Active' : 'Inactive'}</span>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        </div>
      </div>

      {/* New Device Dialog - 规则1：必须与 Location 绑定 */}
      <Dialog open={newDialogOpen} onOpenChange={setNewDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Add New Device</DialogTitle>
            <DialogDescription>
              New devices must be bound to a location. Select a location first, then fill in device details.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label>Location *</Label>
              <Select value={newLocationId} onValueChange={setNewLocationId} required>
                <SelectTrigger>
                  <SelectValue placeholder="Select location (required)" />
                </SelectTrigger>
                <SelectContent>
                  {MOCK_LOCATIONS.map((loc) => (
                    <SelectItem key={loc.id} value={loc.id}>
                      {loc.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid gap-2">
              <Label>Device Category</Label>
              <Select value={newCategory} onValueChange={(v) => setNewCategory(v as DeviceCategory)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {(Object.keys(CATEGORY_LABELS) as DeviceCategory[]).map((cat) => (
                    <SelectItem key={cat} value={cat}>
                      {CATEGORY_LABELS[cat]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid gap-2">
              <Label>Device Name</Label>
              <Input
                placeholder="e.g. printer 1"
                value={newDeviceName}
                onChange={(e) => setNewDeviceName(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <Label>Device ID</Label>
              <Input
                placeholder="e.g. 123456789"
                value={newDeviceId}
                onChange={(e) => setNewDeviceId(e.target.value)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setNewDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleAddDevice} disabled={!newLocationId}>
              Add Device
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Printer Recharge Records Dialog - 规则4 */}
      <Dialog open={!!rechargeDialogDevice} onOpenChange={(open) => !open && setRechargeDialogDevice(null)}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Recharge Records — {rechargeDialogDevice?.device}</DialogTitle>
            <DialogDescription>
              Balance: {rechargeDialogDevice?.balance ?? '—'}
            </DialogDescription>
          </DialogHeader>
          <div className="py-2 max-h-64 overflow-y-auto">
            {rechargeDialogDevice?.rechargeRecords?.length ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Date</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>Note</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {rechargeDialogDevice.rechargeRecords.map((r) => (
                    <TableRow key={r.id}>
                      <TableCell>{r.date}</TableCell>
                      <TableCell>{r.amount}</TableCell>
                      <TableCell>{r.note ?? '—'}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <p className="text-sm text-gray-500">No recharge records yet.</p>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRechargeDialogDevice(null)}>
              Close
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}