/* Customer list — based on full-version/src/sections/apps/customer/CustomerTable.tsx
   Search + status filter + sort + Add Customer + table + pagination
*/

function CustomerScreen() {
  const [filter, setFilter]   = React.useState("all");
  const [query, setQuery]     = React.useState("");
  const [selected, setSelected] = React.useState({});
  const [expanded, setExpanded] = React.useState(null);

  const rows = [
    { id: 7,  name:"Anna M. Hines",     email:"anna.hines@mail.com",     contact:"(815) 226-9968", age:31, country:"Norfolk Island", status:"Verified", visits:14, progress:78 },
    { id: 6,  name:"Judith H. Fritsche",email:"judith.fritsche@mail.com",contact:"(530) 269-7148", age:24, country:"Aruba",         status:"Pending",  visits:9,  progress:31 },
    { id: 5,  name:"Peter T. Smith",    email:"peter.smith@mail.com",    contact:"(304) 506-5551", age:42, country:"Macao",         status:"Verified", visits:21, progress:64 },
    { id: 4,  name:"Emily K. Carter",   email:"emily.carter@mail.com",   contact:"(212) 555-0117", age:29, country:"Tanzania",      status:"Rejected", visits:3,  progress:12 },
    { id: 3,  name:"Marcus Lee",        email:"marcus.lee@mail.com",     contact:"(415) 222-3984", age:38, country:"South Korea",   status:"Verified", visits:7,  progress:55 },
    { id: 2,  name:"Sasha Iverson",     email:"sasha.iverson@mail.com",  contact:"(917) 555-1010", age:27, country:"Brazil",        status:"Pending",  visits:11, progress:42 },
    { id: 1,  name:"Robin Wexler",      email:"robin.wexler@mail.com",   contact:"(503) 411-2099", age:34, country:"Iceland",       status:"Verified", visits:18, progress:84 },
  ];

  const filtered = rows.filter(r =>
    (filter === "all" || r.status.toLowerCase() === filter) &&
    (query === "" || (r.name + r.email + r.country).toLowerCase().includes(query.toLowerCase()))
  );
  const selectedCount = Object.keys(selected).filter(k => selected[k]).length;

  const statusTag = (s) => {
    const map = { Verified: "success", Pending: "pending", Rejected: "error" };
    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>Customer</a><span className="sep">/</span>
        <span className="cur">List</span>
      </div>
      <h1 className="page-title">Customer list</h1>

      <Card padding={false}>
        <div style={{padding:16,display:"flex",justifyContent:"space-between",gap:12,alignItems:"center",flexWrap:"wrap"}}>
          <div style={{position:"relative",width:280}}>
            <Icon.Search size={14} style={{position:"absolute",left:10,top:"50%",transform:"translateY(-50%)",color:"#bfbfbf"}}/>
            <input className="input" placeholder={`Search ${rows.length} records...`} value={query}
                   onChange={e => setQuery(e.target.value)}
                   style={{paddingLeft:32,height:36}}/>
          </div>

          <div style={{display:"flex",gap:8,alignItems:"center"}}>
            <select className="input" style={{height:36,width:140}} value={filter}
                    onChange={e => setFilter(e.target.value)}>
              <option value="all">All Status</option>
              <option value="verified">Verified</option>
              <option value="pending">Pending</option>
              <option value="rejected">Rejected</option>
            </select>
            <select className="input" style={{height:36,width:160}}>
              <option>Sort by Name</option>
              <option>Sort by Country</option>
              <option>Sort by Age</option>
            </select>
            <Button type="primary" size="md" icon={<Icon.Plus size={14}/>}>Add Customer</Button>
            <Button type="default" size="md" icon={<Icon.Doc size={14}/>}>Export</Button>
          </div>
        </div>

        {selectedCount > 0 && (
          <div style={{padding:"8px 16px",background:"#e6f4ff",borderTop:"1px solid #f0f0f0",borderBottom:"1px solid #f0f0f0",fontSize:13,color:"#1677ff",display:"flex",alignItems:"center",gap:12}}>
            {selectedCount} row(s) selected
            <Button type="text" size="sm">Clear</Button>
            <span style={{flex:1}}/>
            <Button type="text" size="sm" icon={<Icon.Trash size={12}/>}>Delete</Button>
          </div>
        )}

        <table className="tbl">
          <thead>
            <tr>
              <th style={{width:40}}>
                <input type="checkbox" onChange={e => {
                  const all = {};
                  if (e.target.checked) filtered.forEach(r => all[r.id] = true);
                  setSelected(all);
                }}/>
              </th>
              <th>#</th>
              <th>Customer Name</th>
              <th>Contact</th>
              <th>Country</th>
              <th>Status</th>
              <th>Progress</th>
              <th style={{textAlign:"right"}}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(r => (
              <React.Fragment key={r.id}>
                <tr onClick={() => setExpanded(expanded === r.id ? null : r.id)} style={{cursor:"pointer"}}>
                  <td onClick={e => e.stopPropagation()}>
                    <input type="checkbox" checked={!!selected[r.id]}
                           onChange={e => setSelected({...selected, [r.id]: e.target.checked})}/>
                  </td>
                  <td className="o-id">#{r.id}</td>
                  <td>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      <Avatar size={32} bg={`hsl(${(r.id*70)%360},70%,55%)`}>{r.name.split(" ").map(s=>s[0]).join("").slice(0,2)}</Avatar>
                      <div>
                        <div style={{font:"500 14px/22px var(--font-sans)",color:"#262626"}}>{r.name}</div>
                        <div style={{font:"400 12px/20px var(--font-sans)",color:"#8c8c8c"}}>{r.email}</div>
                      </div>
                    </div>
                  </td>
                  <td>{r.contact}</td>
                  <td>{r.country}</td>
                  <td>{statusTag(r.status)}</td>
                  <td style={{minWidth:140}}>
                    <div className="prog"><div className="bar" style={{width:`${r.progress}%`}}/></div>
                    <span style={{fontSize:11,color:"#8c8c8c",marginTop:4,display:"inline-block"}}>{r.progress}%</span>
                  </td>
                  <td style={{textAlign:"right"}} onClick={e => e.stopPropagation()}>
                    <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>
                {expanded === r.id && (
                  <tr style={{background:"rgba(230,244,255,.4)"}}>
                    <td colSpan={8} style={{padding:"16px 24px"}}>
                      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:24}}>
                        <div>
                          <div style={{font:"500 13px/20px var(--font-sans)",color:"#8c8c8c",textTransform:"uppercase",letterSpacing:.04,marginBottom:8}}>Personal Information</div>
                          <div style={{font:"400 14px/22px var(--font-sans)"}}><b style={{fontWeight:500}}>Age:</b> {r.age}</div>
                          <div style={{font:"400 14px/22px var(--font-sans)"}}><b style={{fontWeight:500}}>Email:</b> {r.email}</div>
                          <div style={{font:"400 14px/22px var(--font-sans)"}}><b style={{fontWeight:500}}>Contact:</b> {r.contact}</div>
                        </div>
                        <div>
                          <div style={{font:"500 13px/20px var(--font-sans)",color:"#8c8c8c",textTransform:"uppercase",letterSpacing:.04,marginBottom:8}}>Activity</div>
                          <div style={{font:"400 14px/22px var(--font-sans)"}}><b style={{fontWeight:500}}>Visits:</b> {r.visits} this month</div>
                          <div style={{font:"400 14px/22px var(--font-sans)"}}><b style={{fontWeight:500}}>Country:</b> {r.country}</div>
                        </div>
                        <div>
                          <div style={{font:"500 13px/20px var(--font-sans)",color:"#8c8c8c",textTransform:"uppercase",letterSpacing:.04,marginBottom:8}}>Engagement Progress</div>
                          <div className="prog" style={{margin:"4px 0 6px"}}><div className="bar" style={{width:`${r.progress}%`}}/></div>
                          <span style={{font:"500 14px/22px var(--font-sans)"}}>{r.progress}% complete</span>
                        </div>
                      </div>
                    </td>
                  </tr>
                )}
              </React.Fragment>
            ))}
          </tbody>
        </table>

        <div style={{padding:16,display:"flex",justifyContent:"space-between",alignItems:"center",borderTop:"1px solid #f0f0f0"}}>
          <div style={{display:"flex",alignItems:"center",gap:8,fontSize:13,color:"#8c8c8c"}}>
            <span>Row per page</span>
            <select className="input" style={{height:28,width:64,padding:"0 6px",fontSize:12}}>
              <option>10</option><option>25</option><option>50</option>
            </select>
            <span>Go to</span>
            <input className="input" style={{height:28,width:48,padding:"0 6px",fontSize:12}} defaultValue="1"/>
          </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">7</Button>
            <Button type="text" size="sm" icon={<Icon.Chev size={12}/>}/>
          </div>
        </div>
      </Card>
    </>
  );
}

window.CustomerScreen = CustomerScreen;