import { useCollection, useIdentity } from '@deplixo/sdk';
import { BOX_SIZES, STYLES, STEPS, TREATS } from './components/constants.js';
import {
  StepBox, StepStyle, StepColors, StepAccent, StepTreats, StepDetails
} from './components/Steps.jsx';
import Concept from './components/Concept.jsx';

const EMPTY = {
  box: null,
  customQty: 12,
  style: null,
  colors: [],
  accent: null,
  treats: [],
  occasion: '',
  nameNum: '',
  notes: '',
};

function Wizard({ onSaved }) {
  const [step, setStep] = React.useState(0);
  const [selection, setSelection] = React.useState(EMPTY);
  const [savedId, setSavedId] = React.useState(null);
  const designs = useCollection('designs');

  const update = (patch) => setSelection(s => ({ ...s, ...patch }));

  const box = BOX_SIZES.find(b => b.id === selection.box);
  const style = STYLES.find(s => s.id === selection.style);

  const canAdvance = () => {
    switch (step) {
      case 0: return !!selection.box;
      case 1: return !!selection.style;
      case 2: return style ? selection.colors.length >= style.minColors : false;
      case 3: return true; // accent optional
      case 4: return selection.treats.length >= 1;
      case 5: return true; // details optional
      default: return true;
    }
  };

  const restart = () => {
    setSelection(EMPTY);
    setStep(0);
    setSavedId(null);
  };

  const saveConcept = async (concept) => {
    const record = {
      selection,
      concept,
      savedAt: new Date().toISOString(),
    };
    const created = await designs.add(record);
    setSavedId(created?.id || 'saved');
    if (onSaved) onSaved();
  };

  return (
    <div>
      <div className="stepper">
        {STEPS.map((label, i) => (
          <div
            key={label}
            className={`step-pill ${i === step ? 'active' : i < step ? 'done' : ''}`}
          >
            {label}
          </div>
        ))}
      </div>

      {step === 0 && <StepBox selection={selection} update={update} />}
      {step === 1 && <StepStyle selection={selection} update={update} />}
      {step === 2 && <StepColors selection={selection} update={update} />}
      {step === 3 && <StepAccent selection={selection} update={update} />}
      {step === 4 && <StepTreats selection={selection} update={update} />}
      {step === 5 && <StepDetails selection={selection} update={update} />}
      {step === 6 && (
        <Concept
          selection={selection}
          onSave={saveConcept}
          onRestart={restart}
          saved={!!savedId}
        />
      )}

      {step < 6 && (
        <div className="nav-row">
          <button
            className="btn btn-ghost"
            data-testid="back-btn"
            onClick={() => setStep(s => Math.max(0, s - 1))}
            disabled={step === 0}
            style={step === 0 ? {visibility:'hidden'} : {}}
          >
            ← Back
          </button>
          <button
            className="btn btn-primary"
            data-testid="next-btn"
            onClick={() => setStep(s => s + 1)}
            disabled={!canAdvance()}
          >
            {step === 5 ? 'Generate design ✨' : 'Next →'}
          </button>
        </div>
      )}
    </div>
  );
}

function SavedDesigns() {
  const { items, loading, remove } = useCollection('designs');
  const { user } = useIdentity();
  const mine = (items || []).filter(d => d.author?.id === user?.id);
  const [viewing, setViewing] = React.useState(null);

  if (loading) return <div className="empty">Loading saved designs…</div>;
  if (!mine.length) return (
    <div className="card">
      <h2>Saved designs</h2>
      <div className="empty">
        You haven't saved any designs yet. Complete the wizard and tap <b>Save this design</b> to keep it here.
      </div>
    </div>
  );

  if (viewing) {
    const d = viewing;
    const box = BOX_SIZES.find(b => b.id === d.value?.selection?.box);
    const style = STYLES.find(s => s.id === d.value?.selection?.style);
    return (
      <div className="card">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16}}>
          <h2 style={{margin:0}}>{d.value?.concept?.title || 'Saved design'}</h2>
          <button className="btn btn-ghost" data-testid="close-view-btn" onClick={() => setViewing(null)}>← Back to list</button>
        </div>
        <div className="concept-hero">
          <h3>{d.value?.concept?.title}</h3>
          <p>{d.value?.concept?.tagline}</p>
        </div>
        <div className="summary-line"><span className="k">Box</span><span className="v">{box?.name}</span></div>
        <div className="summary-line"><span className="k">Style</span><span className="v">{style?.name}</span></div>
        <div className="summary-line"><span className="k">Colors</span><span className="v">{(d.value?.selection?.colors || []).join(', ')}</span></div>
        <div className="summary-line"><span className="k">Accent</span><span className="v">{d.value?.selection?.accent || 'None'}</span></div>
        <div className="summary-line"><span className="k">Treats</span><span className="v">
          {(d.value?.selection?.treats || []).map(id => TREATS.find(t => t.id === id)?.name).filter(Boolean).join(', ')}
        </span></div>
        <div className="concept-section" style={{marginTop:20}}>
          <h4>Overall design</h4>
          <p style={{lineHeight:1.6}}>{d.value?.concept?.overallDesign}</p>
        </div>
        {d.value?.concept?.treatPlan && (
          <div className="concept-section">
            <h4>Treat-by-treat plan</h4>
            <div className="treat-plan">
              {d.value.concept.treatPlan.map((p, i) => {
                const t = TREATS.find(x => x.id === p.treatId);
                return (
                  <div className="treat-plan-card" key={i}>
                    <div className="name">
                      <span>{t?.emoji} {t?.name || p.treatId}</span>
                      <span className="qty">×{p.count}</span>
                    </div>
                    <div className="decor">{p.decoration}</div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="card">
      <h2>Saved designs</h2>
      <p className="sub">Your previously generated design concepts.</p>
      <div className="saved-list">
        {mine.map(d => {
          const box = BOX_SIZES.find(b => b.id === d.value?.selection?.box);
          const style = STYLES.find(s => s.id === d.value?.selection?.style);
          return (
            <div key={d.id} className="saved-card" onClick={() => setViewing(d)}>
              <h4>{d.value?.concept?.title || 'Untitled concept'}</h4>
              <div className="meta">{box?.name} • {style?.name}</div>
              <div className="meta" style={{marginTop:6}}>
                {new Date(d.value?.savedAt || d.createdAt).toLocaleDateString()}
              </div>
              <div style={{marginTop:10, display:'flex', gap:8}}>
                <button className="btn btn-ghost" style={{padding:'6px 12px', fontSize:'0.8rem'}} onClick={(e) => { e.stopPropagation(); setViewing(d); }}>
                  View
                </button>
                <button className="btn btn-danger" style={{padding:'6px 12px', fontSize:'0.8rem'}} onClick={(e) => { e.stopPropagation(); remove(d.id); }}>
                  Delete
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function App() {
  const [tab, setTab] = React.useState('design');

  return (
    <main className="app">
      <header className="app-header">
        <h1>Sweet Studio</h1>
        <p>AI-powered design concepts for chocolate-covered treat boxes</p>
      </header>

      <nav className="tabs">
        <button
          className={`tab ${tab === 'design' ? 'active' : ''}`}
          data-testid="tab-design"
          onClick={() => setTab('design')}
        >
          Design a box
        </button>
        <button
          className={`tab ${tab === 'saved' ? 'active' : ''}`}
          data-testid="tab-saved"
          onClick={() => setTab('saved')}
        >
          Saved designs
        </button>
      </nav>

      {tab === 'design' && <Wizard onSaved={() => setTab('saved')} />}
      {tab === 'saved' && <SavedDesigns />}
    </main>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);