/* Invoice list — based on full-version/src/views/apps/invoice/list.tsx + InvoiceCard.tsx
   Stat-tile row across the top + filterable table with status tags
*/

function InvoiceScreen() {
  const tiles = [
    { label:"All Invoices", count:"5,678",  color:"#1677ff", bg:"#e6f4ff", icon:<Icon.Doc size={18}/>},
    { label:"Paid",         count:"4,123",  color:"#52c41a", bg:"#f6ffed", icon:<Icon.Check size={18}/>},
    { label:"Pending",      count:"896",    color:"#faad14", bg:"#fffbe6", icon:<Icon.Help size={18}/>},
    { label:"Cancelled",    count:"412",    color:"#f5222d", bg:"#fff1f0", icon:<Icon.X size={18}/>},
    { label:"Draft",        count:"247",    color:"#722ed1", bg:"#f9f0ff", icon:<Icon.Pencil size={18}/>},
  ];

  const rows = [
    { id:"#83001", customer:"Anna M. Hines",     email:"anna.hines@mail.com",       date:"Nov 03, 2025", due:"Nov 13, 2025", amount:"$4,580.00", status:"Paid" },
    { id:"#83002", customer:"Judith Fritsche",   email:"judith.fritsche@mail.com",  date:"Nov 05, 2025", due:"Nov 15, 2025", amount:"$1,290.00", status:"Pending" },
    { id:"#83003", customer:"Peter T. Smith",    email:"peter.smith@mail.com",      date:"Nov 06, 2025", due:"Nov 16, 2025", amount:"$3,210.00", status:"Paid" },
    { id:"#83004", customer:"Emily Carter",      email:"emily.carter@mail.com",     date:"Nov 06, 2025", due:"Nov 16, 2025", amount:"$ 540.00",  status:"Cancelled" },
    { id:"#83005", customer:"Marcus Lee",        email:"marcus.lee@mail.com",       date:"Nov 07, 2025", due:"Nov 17, 2025", amount:"$2,860.00", status:"Pending" },
    { id:"#83006", customer:"Sasha Iverson",     email:"sasha.iverson@mail.com",    date:"Nov 09, 2025", due:"Nov 19, 2025", amount:"$8,120.00", status:"Draft" },
    { id:"#83007", customer:"Robin Wexler",      email:"robin.wexler@mail.com",     date:"Nov 11, 2025", due:"Nov 21, 2025", amount:"$ 980.00",  status:"Paid" },
  ];

  const statusTag = (s) => {
    const map = { Paid:"success", Pending:"pending", Cancelled:"error", Draft:"default" };
    return <Tag type={map[s]} dot>{s}</Tag>;
  };

  return (
    <>
      <div className="crumbs">
        <a>Home</a><span className="sep">/</span>
        <a>Apps</a><span className="sep">/</span>
        <a>Invoice</a><span className="sep">/</span>
        <span className="cur">List</span>
      </div>
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",margin:"6px 0 20px"}}>
        <h1 className="page-title" style={{margin:0}}>Invoices</h1>
        <Button type="primary" size="md" icon={<Icon.Plus size={14}/>}>Create Invoice</Button>
      </div>

      {/* stat tiles */}
      <div style={{display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:20,marginBottom:24}}>
        {tiles.map(t => (
          <div key={t.label} className="card" style={{padding:18,display:"flex",alignItems:"center",gap:14,cursor:"pointer"}}>
            <div style={{width:44,height:44,borderRadius:8,background:t.bg,color:t.color,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>{t.icon}</div>
            <div>
              <div style={{font:"400 13px/20px var(--font-sans)",color:"#8c8c8c"}}>{t.label}</div>
              <div style={{font:"600 20px/28px var(--font-sans)",color:"#262626"}}>{t.count}</div>
            </div>
          </div>
        ))}
      </div>

      <Card padding={false}>
        <div style={{padding:16,display:"flex",justifyContent:"space-between",gap:12,alignItems:"center",flexWrap:"wrap"}}>
          <div style={{display:"flex",alignItems:"center",gap:24}}>
            <div className="seg" style={{display:"inline-flex",background:"#fafafa",borderRadius:4,padding:2,border:"1px solid #f0f0f0"}}>
              {["All", "Paid", "Pending", "Cancelled", "Draft"].map((t, i) => (
                <span key={t} style={{padding:"4px 14px",borderRadius:3,background:i===0?"#fff":"transparent",color:i===0?"#262626":"#8c8c8c",fontSize:13,fontWeight:i===0?500:400,cursor:"pointer",border:i===0?"1px solid #f0f0f0":"none"}}>{t}</span>
              ))}
            </div>
          </div>
          <div style={{display:"flex",gap:8,alignItems:"center"}}>
            <div style={{position:"relative",width:240}}>
              <Icon.Search size={14} style={{position:"absolute",left:10,top:"50%",transform:"translateY(-50%)",color:"#bfbfbf"}}/>
              <input className="input" placeholder="Search invoices..." style={{paddingLeft:32,height:36}}/>
            </div>
            <Button type="default" size="md" icon={<Icon.Filter size={14}/>}>Filter</Button>
            <Button type="default" size="md" icon={<Icon.Doc size={14}/>}>Export</Button>
          </div>
        </div>

        <table className="tbl">
          <thead>
            <tr>
              <th style={{width:40}}><input type="checkbox"/></th>
              <th>Invoice ID</th>
              <th>Customer</th>
              <th>Issue Date</th>
              <th>Due Date</th>
              <th style={{textAlign:"right"}}>Amount</th>
              <th>Status</th>
              <th style={{textAlign:"right"}}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r.id}>
                <td><input type="checkbox"/></td>
                <td className="o-id">{r.id}</td>
                <td>
                  <div style={{display:"flex",alignItems:"center",gap:10}}>
                    <Avatar size={32} bg={`hsl(${(r.id.charCodeAt(4)*r.id.charCodeAt(5))%360},65%,55%)`}>{r.customer.split(" ").map(s=>s[0]).join("").slice(0,2)}</Avatar>
                    <div>
                      <div style={{font:"500 14px/22px var(--font-sans)",color:"#262626"}}>{r.customer}</div>
                      <div style={{font:"400 12px/20px var(--font-sans)",color:"#8c8c8c"}}>{r.email}</div>
                    </div>
                  </div>
                </td>
                <td>{r.date}</td>
                <td>{r.due}</td>
                <td style={{textAlign:"right",color:"#262626",fontWeight:500}}>{r.amount}</td>
                <td>{statusTag(r.status)}</td>
                <td style={{textAlign:"right"}}>
                  <Button type="text" size="sm" icon={<Icon.Eye size={14}/>}/>
                  <Button type="text" size="sm" icon={<Icon.Pencil size={14}/>}/>
                  <Button type="text" size="sm" icon={<Icon.Trash size={14}/>}/>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        <div style={{padding:16,display:"flex",justifyContent:"space-between",alignItems:"center",borderTop:"1px solid #f0f0f0"}}>
          <div style={{fontSize:13,color:"#8c8c8c"}}>Showing 1 to 7 of 5,678 results</div>
          <div style={{display:"flex",gap:4,alignItems:"center"}}>
            <Button type="text" size="sm" icon={<Icon.Chev size={12} style={{transform:"rotate(180deg)"}}/>}/>
            <Button type="primary" size="sm">1</Button>
            <Button type="text" size="sm">2</Button>
            <Button type="text" size="sm">3</Button>
            <span style={{padding:"0 4px",color:"#bfbfbf"}}>...</span>
            <Button type="text" size="sm">811</Button>
            <Button type="text" size="sm" icon={<Icon.Chev size={12}/>}/>
          </div>
        </div>
      </Card>
    </>
  );
}

window.InvoiceScreen = InvoiceScreen;