// app-screens.jsx — Recreations of HomeMind app screens for animation

// Generic dark surface card (matches the app's rounded surface look)
function Card({ children, style }) {
  return (
    <div style={{
      background: COLORS.surface,
      borderRadius: 16,
      padding: 16,
      ...style,
    }}>
      {children}
    </div>
  );
}

// ── Screen: Home (Good morning / HomeMind) ──────────────────────────────────
function ScreenHome({ filledRecords = 0, showAskAnswer = false }) {
  return (
    <div style={{ position: 'absolute', inset: 0, color: COLORS.text }}>
      <div style={{ padding: '12px 20px 0' }}>
        <div style={{ color: COLORS.textSec, fontSize: 14, marginBottom: 2 }}>Good morning</div>
        <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 16 }}>HomeMind</div>

        <Card style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 10,
            background: COLORS.surface2,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M3 12l9-8 9 8M5 10v10h14V10" stroke={COLORS.primary} strokeWidth="1.8" strokeLinejoin="round"/>
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ color: COLORS.textSec, fontSize: 10, fontWeight: 700, letterSpacing: '0.08em' }}>HOME HEALTH</div>
            <div style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>
              {filledRecords > 0 ? `${filledRecords} records saved` : "Start building your home's memory"}
            </div>
          </div>
        </Card>

        <div style={{ marginTop: 18, marginBottom: 8, color: COLORS.primary, fontSize: 11, fontWeight: 700, letterSpacing: '0.08em' }}>
          ASK HOMEMIND
        </div>
        <div style={{
          background: COLORS.surface,
          borderRadius: 12,
          padding: '10px 14px',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="6" stroke={COLORS.textSec} strokeWidth="2"/>
            <path d="M16 16l4 4" stroke={COLORS.textSec} strokeWidth="2" strokeLinecap="round"/>
          </svg>
          <span style={{ color: COLORS.textMuted, fontSize: 14 }}>Ask HomeMind about your ho…</span>
        </div>

        {showAskAnswer ? (
          <div style={{ marginTop: 12 }}>
            <Card style={{
              padding: 14,
              border: `1px solid ${COLORS.primary}`,
            }}>
              <div style={{ color: COLORS.primary, fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', marginBottom: 6 }}>
                ANSWER
              </div>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>16×20×1</div>
              <div style={{ color: COLORS.textSec, fontSize: 13, marginTop: 6, lineHeight: 1.4 }}>
                HVAC filter · Utility closet<br/>
                Replace every 90 days · Last: Mar 12
              </div>
            </Card>
          </div>
        ) : (
          <div style={{ color: COLORS.textSec, fontSize: 12, marginTop: 8, lineHeight: 1.5 }}>
            "When did we replace the water heater?" · "Find the roof repair receipt." · "What size HVAC filter?"
          </div>
        )}
      </div>
      <TabBar active="Home" />
    </div>
  );
}

// ── Screen: Add (camera/save sheet) ─────────────────────────────────────────
function ScreenAdd({ photoSrc = null, photoCaptured = false, autoFilled = false }) {
  return (
    <div style={{ position: 'absolute', inset: 0, color: COLORS.text }}>
      <div style={{
        padding: '8px 16px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ color: COLORS.textSec, fontSize: 15 }}>Cancel</span>
        <span style={{ fontSize: 17, fontWeight: 700 }}>Add to HomeMind</span>
        <span style={{ color: COLORS.primary, fontSize: 15, fontWeight: 600 }}>Save</span>
      </div>

      <div style={{ padding: '12px 20px' }}>
        <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>Template</div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          <Pill active label="Filter" />
          <Pill label="Paint" />
          <Pill label="Appliance" />
        </div>

        {/* Photo area */}
        <div style={{
          position: 'relative',
          height: 160,
          borderRadius: 14,
          overflow: 'hidden',
          background: COLORS.surface,
          border: `1px dashed ${COLORS.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 14,
        }}>
          {photoCaptured && photoSrc ? (
            <img src={photoSrc} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          ) : (
            <div style={{ color: COLORS.textSec, fontSize: 13, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                <rect x="3" y="6" width="18" height="14" rx="2" stroke={COLORS.textSec} strokeWidth="1.6"/>
                <circle cx="12" cy="13" r="4" stroke={COLORS.textSec} strokeWidth="1.6"/>
                <path d="M8 6l1.5-2h5L16 6" stroke={COLORS.textSec} strokeWidth="1.6"/>
              </svg>
              Take Photo
            </div>
          )}
        </div>

        <Field label="Name *" value={autoFilled ? 'HVAC Filter' : ''} placeholder="HVAC Filter" auto={autoFilled} />
        <Field label="Room *" value={autoFilled ? 'Utility Room' : ''} placeholder="Select a room" auto={autoFilled} chevron />
        <Field label="Specific Location" value={autoFilled ? 'Utility closet' : ''} placeholder="e.g. Top shelf, utility closet" auto={autoFilled} />
      </div>
      <TabBar active="Add" />
    </div>
  );
}

function Pill({ label, active }) {
  return (
    <div style={{
      padding: '8px 14px',
      borderRadius: 999,
      background: active ? COLORS.primary : COLORS.surface,
      color: active ? '#0a1620' : COLORS.text,
      fontSize: 13, fontWeight: 600,
      display: 'flex', alignItems: 'center', gap: 6,
    }}>
      {label}
    </div>
  );
}

function Field({ label, value, placeholder, auto, chevron }) {
  return (
    <div style={{ marginBottom: 12 }}>
      <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 6 }}>{label}</div>
      <div style={{
        background: COLORS.surface,
        borderRadius: 10,
        padding: '12px 14px',
        fontSize: 14,
        color: value ? COLORS.text : COLORS.textMuted,
        border: auto ? `1px solid ${COLORS.primary}` : `1px solid transparent`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative',
        transition: 'border 250ms',
      }}>
        <span>{value || placeholder}</span>
        {auto && (
          <span style={{
            color: COLORS.primary, fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
          }}>AUTO</span>
        )}
        {chevron && !auto && <span style={{ color: COLORS.textMuted }}>▾</span>}
      </div>
    </div>
  );
}

// ── Screen: Browse (rooms grid) ─────────────────────────────────────────────
function ScreenBrowse({ rooms = [] }) {
  return (
    <div style={{ position: 'absolute', inset: 0, color: COLORS.text }}>
      <div style={{ padding: '12px 20px 0' }}>
        <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 14 }}>Home Memory</div>
        <div style={{
          background: COLORS.surface,
          borderRadius: 10,
          padding: 4,
          display: 'flex',
          marginBottom: 18,
        }}>
          <div style={{
            flex: 1, textAlign: 'center', padding: '8px 0',
            background: COLORS.surface2, borderRadius: 8,
            fontSize: 14, fontWeight: 700,
          }}>Rooms</div>
          <div style={{
            flex: 1, textAlign: 'center', padding: '8px 0',
            color: COLORS.textSec,
            fontSize: 14, fontWeight: 500,
          }}>Categories</div>
        </div>

        {rooms.length === 0 ? (
          <div style={{ textAlign: 'center', paddingTop: 60 }}>
            <div style={{ fontSize: 22, fontWeight: 800, marginBottom: 10 }}>No home memory yet</div>
            <div style={{ color: COLORS.textSec, fontSize: 14, lineHeight: 1.5, padding: '0 20px' }}>
              Start with one room or system record.
            </div>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {rooms.map((r, i) => (
              <RoomCard key={r.name} {...r} index={i} />
            ))}
          </div>
        )}
      </div>
      <TabBar active="Browse" />
    </div>
  );
}

function RoomCard({ name, count, icon, highlight, items = [], index }) {
  return (
    <div style={{
      background: COLORS.surface,
      border: highlight ? `1px solid ${COLORS.primary}` : `1px solid transparent`,
      borderRadius: 14,
      padding: 12,
      height: 96,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      transition: 'border 200ms',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 7,
          background: COLORS.primaryDim,
          color: COLORS.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14,
        }}>{icon}</div>
        <div style={{ fontSize: 13, fontWeight: 700, color: COLORS.text }}>{name}</div>
      </div>
      <div style={{ color: COLORS.textSec, fontSize: 11 }}>
        {count > 0 ? `${count} ${count === 1 ? 'record' : 'records'}` : '—'}
      </div>
    </div>
  );
}

Object.assign(window, { Card, ScreenHome, ScreenAdd, ScreenBrowse, Pill, Field, RoomCard });