// Profile editor screen — edit business name, bio, location, WhatsApp, avatar colour.

const { useState: useS_pe } = React;

const AVATAR_GRADIENTS = [
  'linear-gradient(135deg,#F6A96B 0%,#D96B3A 100%)',
  'linear-gradient(135deg,#8EB8E8 0%,#5A7FBF 100%)',
  'linear-gradient(135deg,#A8E6CF 0%,#3DAB6E 100%)',
  'linear-gradient(135deg,#FFAAA5 0%,#E05C6B 100%)',
  'linear-gradient(135deg,#C3A8E8 0%,#7B5FBF 100%)',
  'linear-gradient(135deg,#FFD670 0%,#E0A020 100%)',
  'linear-gradient(135deg,#A8D8EA 0%,#3A8FA8 100%)',
  'linear-gradient(135deg,#F5C6C6 0%,#D94848 100%)',
];

function ProfileEditorScreen({ profile, onSave, onClose }) {
  const [businessName, setBusinessName] = useS_pe(profile.businessName || '');
  const [bio, setBio]                   = useS_pe(profile.bio || '');
  const [location, setLocation]         = useS_pe(profile.location || '');
  const [whatsapp, setWhatsapp]         = useS_pe(profile.whatsapp || '');
  const [avatarBg, setAvatarBg]         = useS_pe(profile.avatarBg || AVATAR_GRADIENTS[0]);
  const [username, setUsername]         = useS_pe(profile.username || '');

  const canSave = businessName.trim().length >= 2 && username.trim().length >= 2;

  const handleSave = () => {
    onSave({
      ...profile,
      businessName: businessName.trim(),
      bio: bio.trim(),
      location: location.trim(),
      whatsapp: whatsapp.trim(),
      avatarBg,
      avatarInitial: businessName.trim()[0]?.toUpperCase() || profile.avatarInitial,
      username: username.trim().toLowerCase().replace(/[^a-z0-9_]/g, ''),
    });
  };

  const previewProfile = {
    ...profile,
    businessName: businessName || profile.businessName,
    avatarBg,
    avatarInitial: (businessName || profile.businessName)[0]?.toUpperCase(),
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: HUUL_TOKENS.color.bg }}>
      {/* Nav bar */}
      <div style={{ padding: '54px 16px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <GhostButton onClick={onClose}>Cancel</GhostButton>
        <div style={{ fontSize: 16, fontWeight: 600 }}>Edit profile</div>
        <button
          onClick={canSave ? handleSave : undefined}
          disabled={!canSave}
          style={{
            border: 'none', background: 'transparent',
            color: canSave ? HUUL_TOKENS.color.accent : HUUL_TOKENS.color.ink4,
            fontSize: 16, fontWeight: 600, cursor: canSave ? 'pointer' : 'not-allowed',
            fontFamily: HUUL_TOKENS.font.stack,
          }}>Save</button>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '10px 16px 100px' }}>

        {/* Avatar preview + colour picker */}
        <div style={{
          background: '#fff', borderRadius: 20, padding: 16,
          boxShadow: HUUL_TOKENS.shadow.card, marginBottom: 14,
        }}>
          <HuulLabel>Avatar colour</HuulLabel>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 14 }}>
            <Avatar profile={previewProfile} size={64} />
            <div style={{ fontSize: 13.5, color: HUUL_TOKENS.color.ink3, lineHeight: 1.4 }}>
              Pick a colour below.<br/>The initial is taken from your business name.
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 8 }}>
            {AVATAR_GRADIENTS.map((g, i) => (
              <button key={i} onClick={() => setAvatarBg(g)} style={{
                aspectRatio: '1', border: avatarBg === g ? `2.5px solid ${HUUL_TOKENS.color.accent}` : '2.5px solid transparent',
                borderRadius: 12, background: g, cursor: 'pointer', padding: 0,
                boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                transform: avatarBg === g ? 'scale(1.1)' : 'scale(1)',
                transition: 'transform 140ms',
              }} />
            ))}
          </div>
        </div>

        {/* Fields */}
        <div style={{
          background: '#fff', borderRadius: 20, padding: 16,
          boxShadow: HUUL_TOKENS.shadow.card, marginBottom: 14,
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          <div>
            <HuulLabel>Business name</HuulLabel>
            <TextField value={businessName} onChange={setBusinessName}
              placeholder="e.g. Hoodo Goods"
              style={{ boxShadow: 'none', background: 'rgba(0,0,0,0.04)' }} />
          </div>
          <div>
            <HuulLabel>Username</HuulLabel>
            <TextField value={username} onChange={setUsername}
              placeholder="e.g. hoodogoods" prefix="@"
              style={{ boxShadow: 'none', background: 'rgba(0,0,0,0.04)' }} />
            <div style={{ fontSize: 12, color: HUUL_TOKENS.color.ink3, marginTop: 5, paddingLeft: 4 }}>
              Your link will be huul.so/{username || '…'}
            </div>
          </div>
          <div>
            <HuulLabel>Bio</HuulLabel>
            <TextField value={bio} onChange={setBio} multiline rows={3}
              placeholder="Tell customers who you are and what you sell"
              style={{ boxShadow: 'none', background: 'rgba(0,0,0,0.04)' }} />
          </div>
          <div>
            <HuulLabel>Location</HuulLabel>
            <TextField value={location} onChange={setLocation}
              placeholder="e.g. Mogadishu, Somalia"
              style={{ boxShadow: 'none', background: 'rgba(0,0,0,0.04)' }} />
          </div>
          <div>
            <HuulLabel>WhatsApp number</HuulLabel>
            <TextField value={whatsapp} onChange={setWhatsapp}
              placeholder="+252 61 234 5678" prefix="📱"
              style={{ boxShadow: 'none', background: 'rgba(0,0,0,0.04)' }} />
            <div style={{ fontSize: 12, color: HUUL_TOKENS.color.ink3, marginTop: 5, paddingLeft: 4 }}>
              Customers contact you on this number.
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}

window.ProfileEditorScreen = ProfileEditorScreen;