import { Info, Download, Upload, Link as LinkIcon } from "lucide-react";

interface ScrapDevice {
  sn: string;
  model: string;
  scrapDate: string;
  status: "待审批" | "已审批" | "已回收";
  sourceOrder: string;
  reason: string;
}

export default function ScrapManagement() {
  const scrapDevices: ScrapDevice[] = [
    {
      sn: "GD30-2023-001234",
      model: "GD30 地质探测仪",
      scrapDate: "2024-03-01",
      status: "已回收",
      sourceOrder: "WO-2024-0001",
      reason: "主板损坏无法修复",
    },
    {
      sn: "GT20-2023-000567",
      model: "GT20 物探仪",
      scrapDate: "2024-03-05",
      status: "已审批",
      sourceOrder: "WO-2024-0025",
      reason: "多个核心部件损坏",
    },
    {
      sn: "GTXD-2023-000890",
      model: "GTXD 探测仪",
      scrapDate: "2024-03-08",
      status: "待审批",
      sourceOrder: "WO-2024-0048",
      reason: "维修成本超过设备价值",
    },
  ];

  const getStatusStyle = (status: ScrapDevice["status"]) => {
    switch (status) {
      case "已回收":
        return {
          backgroundColor: '#F6FFED',
          color: '#52C41A',
          border: '1px solid #B7EB8F'
        };
      case "已审批":
        return {
          backgroundColor: '#E6F7FF',
          color: '#1890FF',
          border: '1px solid #91D5FF'
        };
      case "待审批":
        return {
          backgroundColor: '#FFFBE6',
          color: '#FAAD14',
          border: '1px solid #FFE58F'
        };
    }
  };

  return (
    <div className="p-6">
      {/* Page Header */}
      <div className="mb-6">
        <div className="flex items-center justify-between mb-2">
          <h2 className="text-2xl font-semibold">报废管理</h2>
          <div className="flex items-center gap-3">
            <button 
              className="px-4 py-2 rounded flex items-center gap-2"
              style={{ border: '1px solid #D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
            >
              <Upload size={16} />
              批量导入
            </button>
            <button 
              className="px-4 py-2 rounded flex items-center gap-2"
              style={{ border: '1px solid #D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
            >
              <Download size={16} />
              导出
            </button>
          </div>
        </div>
        <p className="text-sm" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>管理报废设备与物料回收</p>
      </div>

      {/* Info Banner */}
      <div 
        className="mb-6 p-4 rounded-lg flex items-start gap-3"
        style={{ backgroundColor: '#E6F7FF', border: '1px solid #91D5FF' }}
      >
        <Info size={20} style={{ color: '#1890FF', flexShrink: 0, marginTop: 2 }} />
        <div style={{ color: '#0050B3' }}>
          <div className="font-medium mb-1">报废流程说明</div>
          <div className="text-sm">
            报废单由维修工单中申请报废创建，关联来源维修工单。报废设备需经过审批流程，审批通过后进行物料回收和入库。
          </div>
        </div>
      </div>

      {/* Stat Cards */}
      <div className="grid grid-cols-4 gap-6 mb-6">
        <div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
          <div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>报废设备总数</div>
          <div className="text-3xl font-semibold" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>156</div>
        </div>
        <div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
          <div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>待审批</div>
          <div className="text-3xl font-semibold" style={{ color: '#FAAD14' }}>12</div>
        </div>
        <div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
          <div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>已审批待回收</div>
          <div className="text-3xl font-semibold" style={{ color: '#1890FF' }}>8</div>
        </div>
        <div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
          <div className="text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.45)' }}>已回收入库</div>
          <div className="text-3xl font-semibold" style={{ color: '#52C41A' }}>136</div>
        </div>
      </div>

      {/* Filter Card */}
      <div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
        <div className="grid grid-cols-4 gap-4">
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
              设备SN号
            </label>
            <input 
              type="text"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
              placeholder="输入设备SN号搜索"
            />
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
              报废状态
            </label>
            <select 
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9', backgroundColor: '#fff' }}
            >
              <option>全部</option>
              <option>待审批</option>
              <option>已审批</option>
              <option>已回收</option>
            </select>
          </div>
          <div>
            <label className="block text-sm mb-2" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
              报废日期
            </label>
            <input 
              type="date"
              className="w-full px-3 py-2 border rounded"
              style={{ borderColor: '#D9D9D9' }}
            />
          </div>
          <div className="flex items-end">
            <button 
              className="w-full px-4 py-2 rounded text-white"
              style={{ backgroundColor: '#1890FF' }}
            >
              查询
            </button>
          </div>
        </div>
      </div>

      {/* Scrap Device List */}
      <div className="bg-white rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
        <div className="p-6 border-b" style={{ borderColor: '#F0F0F0' }}>
          <h3 className="text-lg font-semibold">报废设备列表</h3>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead style={{ backgroundColor: '#FAFAFA' }}>
              <tr>
                <th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>设备SN号</th>
                <th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>型号</th>
                <th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>报废日期</th>
                <th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>报废原因</th>
                <th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>状态</th>
                <th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>来源工单</th>
                <th className="px-6 py-3 text-left text-sm font-medium" style={{ color: 'rgba(0, 0, 0, 0.85)' }}>操作</th>
              </tr>
            </thead>
            <tbody>
              {scrapDevices.map((device, index) => (
                <tr 
                  key={index}
                  className="border-b"
                  style={{ borderColor: '#F0F0F0' }}
                >
                  <td className="px-6 py-4">{device.sn}</td>
                  <td className="px-6 py-4" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>{device.model}</td>
                  <td className="px-6 py-4" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>{device.scrapDate}</td>
                  <td className="px-6 py-4" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>{device.reason}</td>
                  <td className="px-6 py-4">
                    <span 
                      className="px-2 py-1 rounded text-xs"
                      style={getStatusStyle(device.status)}
                    >
                      {device.status}
                    </span>
                  </td>
                  <td className="px-6 py-4">
                    <button className="text-sm flex items-center gap-1" style={{ color: '#1890FF' }}>
                      <LinkIcon size={14} />
                      {device.sourceOrder}
                    </button>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
                      <button className="text-sm" style={{ color: '#1890FF' }}>查看详情</button>
                      <button className="text-sm" style={{ color: '#1890FF' }}>物料检测</button>
                      {device.status === "已审批" && (
                        <button className="text-sm" style={{ color: '#52C41A' }}>回收入库</button>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Pagination */}
      <div className="bg-white p-4 rounded-lg flex items-center justify-between" style={{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}>
        <div className="text-sm" style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
          显示 1-10 / 共 156 条
        </div>
        <div className="flex items-center gap-2">
          <button 
            className="px-3 py-1 rounded border"
            style={{ borderColor: '#D9D9D9', color: 'rgba(0, 0, 0, 0.45)' }}
            disabled
          >
            上一页
          </button>
          <button 
            className="px-3 py-1 rounded"
            style={{ backgroundColor: '#1890FF', color: '#fff' }}
          >
            1
          </button>
          <button 
            className="px-3 py-1 rounded border"
            style={{ borderColor: '#D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
          >
            2
          </button>
          <button 
            className="px-3 py-1 rounded border"
            style={{ borderColor: '#D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
          >
            3
          </button>
          <button 
            className="px-3 py-1 rounded border"
            style={{ borderColor: '#D9D9D9', color: 'rgba(0, 0, 0, 0.85)' }}
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  );
}