// List view — the main "Opdrachten" screen

const OpdrachtCard = ({ item, onClick }) => {
  const P = window.PICO;
  return (
    <div
      onClick={onClick}
      style={{
        background: '#fff', borderRadius: 12, padding: 14,
        marginBottom: 12,
        boxShadow: '0 1px 2px rgba(14,31,59,0.04), 0 2px 8px rgba(14,31,59,0.03)',
        cursor: 'pointer', transition: 'transform 0.15s ease',
        border: '1px solid rgba(14,31,59,0.04)',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}
    >
      {/* Top row: thumb + title */}
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <HouseThumb variant={item.thumb.tone} size={50} />
        <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
          <div style={{
            fontFamily: '"Plus Jakarta Sans", system-ui',
            fontWeight: 700, fontSize: 16, color: P.ink,
            letterSpacing: -0.3, lineHeight: 1.25,
            textDecoration: 'underline',
            textDecorationColor: 'rgba(14,31,59,0.3)',
            textUnderlineOffset: 3,
          }}>
            {item.address}, {item.postcode}
          </div>
          <div style={{
            fontFamily: '"Plus Jakarta Sans", system-ui',
            fontWeight: 400, fontSize: 13.5, color: P.muted,
            marginTop: 4, letterSpacing: -0.1,
          }}>
            #{item.id}
          </div>
        </div>
      </div>

      {/* Pills row */}
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 12 }}>
        <StatusPill statusKey={item.status.key} label={item.status.label} />
        <CategoryPill category={item.category} />
      </div>

      {/* Divider */}
      <div style={{
        height: 1, background: P.borderSoft, margin: '12px -14px 0',
      }} />

      {/* Bottom row: customer + warning */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingTop: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <IcPerson size={18} color={P.mutedStrong} />
          <span style={{
            fontFamily: '"Plus Jakarta Sans", system-ui',
            fontWeight: 600, fontSize: 14.5, color: P.ink, letterSpacing: -0.2,
          }}>{item.customer}</span>
        </div>
        {item.hasWarning && <YellowHourglassBadge size={28} />}
      </div>
    </div>
  );
};

const ListView = ({ onOpen }) => {
  const P = window.PICO;
  const [query, setQuery] = React.useState('');

  const filtered = window.MOCK_OPDRACHTEN.filter(o => {
    if (!query) return true;
    const q = query.toLowerCase();
    return (
      o.id.toLowerCase().includes(q) ||
      o.address.toLowerCase().includes(q) ||
      o.postcode.toLowerCase().includes(q) ||
      o.customer.toLowerCase().includes(q) ||
      o.email.toLowerCase().includes(q)
    );
  });

  return (
    <div style={{ background: P.bg, minHeight: '100%', paddingBottom: 30 }}>
      {/* Header bar */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 20px 10px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <PicoLogo height={26} />
          <span style={{
            background: P.partnerBg, color: P.partnerFg,
            fontFamily: '"Plus Jakarta Sans", system-ui', fontWeight: 600,
            fontSize: 13, padding: '4px 10px', borderRadius: 6,
            letterSpacing: -0.1,
          }}>Partner</span>
        </div>
        <button style={{
          width: 42, height: 42, borderRadius: 10, border: `1px solid ${P.border}`,
          background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', padding: 0,
        }}>
          <IcMenu size={22} color={P.ink} />
        </button>
      </div>

      {/* Title + filter */}
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        padding: '16px 20px 14px',
      }}>
        <h1 style={{
          fontFamily: '"Plus Jakarta Sans", system-ui', fontWeight: 800,
          fontSize: 30, color: P.ink, letterSpacing: -0.9, margin: 0,
          lineHeight: 1,
        }}>Opdrachten</h1>
        <button style={{
          display: 'flex', alignItems: 'center', gap: 6,
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          color: P.red, fontFamily: '"Plus Jakarta Sans", system-ui',
          fontWeight: 700, fontSize: 16, letterSpacing: -0.2,
        }}>
          Filter <IcFilter size={18} color={P.red} />
        </button>
      </div>

      {/* Search */}
      <div style={{ padding: '0 20px 14px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          background: '#fff', borderRadius: 10, padding: '12px 14px',
          border: `1px solid ${P.border}`,
        }}>
          <IcSearch size={18} color={P.mutedStrong} />
          <input
            type="text"
            placeholder="ID, adres of contactgegevens"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            style={{
              flex: 1, border: 'none', outline: 'none', background: 'transparent',
              fontFamily: '"Plus Jakarta Sans", system-ui',
              fontSize: 15, color: P.ink, letterSpacing: -0.2,
            }}
          />
        </div>
      </div>

      {/* Cards */}
      <div style={{ padding: '0 16px' }}>
        {filtered.map(item => (
          <OpdrachtCard key={item.id} item={item} onClick={() => onOpen(item)} />
        ))}
        {filtered.length === 0 && (
          <div style={{
            textAlign: 'center', padding: 40, color: P.muted,
            fontFamily: '"Plus Jakarta Sans", system-ui', fontSize: 14,
          }}>Geen opdrachten gevonden.</div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { ListView });