/* @component-map
 * App — Main container, tab navigation, layout shell [app.jsx]
 * EpisodeBoard — Drag-and-drop episode lineup with status management [components/EpisodeBoard.jsx]
 * EpisodeForm — Create/edit episode modal form [components/EpisodeForm.jsx]
 * EpisodeCard — Individual episode card with status badge [components/EpisodeCard.jsx]
 * StatsHeader — Season overview stats [components/StatsHeader.jsx]
 * @end-component-map */

import { useMemo, useState } from 'react';
import { useAuth, useCollection } from '@deplixo/sdk';
import { EpisodeBoard } from './components/EpisodeBoard.jsx';
import { EpisodeForm } from './components/EpisodeForm.jsx';
import { StatsHeader } from './components/StatsHeader.jsx';

function App() {
  const { user, loading, logout } = useAuth();
  const { items: guests, add: addGuest, update: updateGuest, loading: guestsLoading } = useCollection('guests', {
    personal: true,
  });
  const [showForm, setShowForm] = useState(false);
  const [editingEpisode, setEditingEpisode] = useState(null);
  const [showGuestForm, setShowGuestForm] = useState(false);
  const [guestFormError, setGuestFormError] = useState('');
  const [guestDraft, setGuestDraft] = useState({
    name: '',
    email: '',
    phone: '',
    company: '',
    bio: '',
    notes: '',
  });
  const [selectedGuestId, setSelectedGuestId] = useState('');

  const teamDisplayName = useMemo(() => {
    if (!user) return 'Podcast Team';
    return user.name || user.email || 'Podcast Team';
  }, [user]);

  const guestOptions = useMemo(() => {
    return [...(guests || [])].sort((a, b) => {
      const aName = (a?.name || '').toLowerCase();
      const bName = (b?.name || '').toLowerCase();
      return aName.localeCompare(bName);
    });
  }, [guests]);

  function handleEdit(episode) {
    setEditingEpisode(episode);
    setShowForm(true);
  }

  function handleCloseForm() {
    setShowForm(false);
    setEditingEpisode(null);
  }

  function handleNewEpisode() {
    setEditingEpisode(null);
    setShowForm(true);
  }

  function handleGuestInputChange(event) {
    const { name, value } = event.target;
    setGuestDraft((current) => ({ ...current, [name]: value }));
  }

  async function handleCreateGuest(event) {
    event.preventDefault();
    setGuestFormError('');

    if (!guestDraft.name.trim()) {
      setGuestFormError('Guest name is required.');
      return;
    }

    const payload = {
      name: guestDraft.name.trim(),
      email: guestDraft.email.trim(),
      phone: guestDraft.phone.trim(),
      company: guestDraft.company.trim(),
      bio: guestDraft.bio.trim(),
      notes: guestDraft.notes.trim(),
      pastAppearances: [],
    };

    const created = await addGuest(payload);
    const createdId = created?.id || created?._id || created?.docId;

    setGuestDraft({ name: '', email: '', phone: '', company: '', bio: '', notes: '' });
    setShowGuestForm(false);

    if (createdId) {
      setSelectedGuestId(createdId);
    }
  }

  async function handleLinkGuestToEpisode(event) {
    event.preventDefault();
    if (!editingEpisode || !selectedGuestId) return;

    const guest = (guests || []).find((item) => String(item.id || item._id || item.docId) === String(selectedGuestId));
    if (!guest) return;

    const appearance = {
      episodeId: editingEpisode.id || editingEpisode._id || editingEpisode.docId || null,
      episodeTitle: editingEpisode.title || '',
      linkedAt: new Date().toISOString(),
    };

    const previousAppearances = Array.isArray(guest.pastAppearances) ? guest.pastAppearances : [];
    await updateGuest(guest.id || guest._id || guest.docId, {
      pastAppearances: [...previousAppearances, appearance],
    });
  }

  if (loading) {
    return <div className="auth-state">Signing in...</div>;
  }

  if (!user) {
    return (
      <div className="auth-gate">
        <div className="auth-card">
          <div className="auth-brand">
            <span className="header-icon">🎙️</span>
            <h1 className="header-title">PodPlanner</h1>
          </div>
          <h2 className="auth-title">Sign in to access the podcast board</h2>
          <p className="auth-text">
            Use your Google account to join the podcast team, manage episode plans,
            and keep the season schedule in sync.
          </p>
          <div className="auth-note">
            You’ll be redirected to Deplixo login automatically. After signing in,
            your session will be handled for you.
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-left">
          <span className="header-icon">🎙️</span>
          <div>
            <h1 className="header-title">PodPlanner</h1>
            <div className="header-subtitle">Signed in as {teamDisplayName}</div>
          </div>
        </div>
        <div className="header-actions">
          <button className="btn-secondary" onClick={logout}>
            Sign Out
          </button>
          <button className="btn-secondary" onClick={() => setShowGuestForm((value) => !value)}>
            {showGuestForm ? 'Hide Guest Form' : 'New Guest'}
          </button>
          <button className="btn-primary" onClick={handleNewEpisode}>
            + New Episode
          </button>
        </div>
      </header>

      {showGuestForm && (
        <section className="guest-panel">
          <div className="guest-panel-header">
            <h2 className="section-title">Guests</h2>
            <p className="section-subtitle">Create a guest record with contact details and track where they’ve appeared.</p>
          </div>

          <form className="guest-form" onSubmit={handleCreateGuest}>
            <div className="form-row">
              <div className="form-half form-group">
                <label className="form-label">Guest Name</label>
                <input className="form-input" name="name" value={guestDraft.name} onChange={handleGuestInputChange} placeholder="e.g. Jordan Lee" />
              </div>
              <div className="form-half form-group">
                <label className="form-label">Email</label>
                <input className="form-input" name="email" value={guestDraft.email} onChange={handleGuestInputChange} placeholder="guest@example.com" />
              </div>
            </div>
            <div className="form-row">
              <div className="form-half form-group">
                <label className="form-label">Phone</label>
                <input className="form-input" name="phone" value={guestDraft.phone} onChange={handleGuestInputChange} placeholder="(555) 123-4567" />
              </div>
              <div className="form-half form-group">
                <label className="form-label">Company / Role</label>
                <input className="form-input" name="company" value={guestDraft.company} onChange={handleGuestInputChange} placeholder="Company, title, or affiliation" />
              </div>
            </div>
            <div className="form-group">
              <label className="form-label">Bio</label>
              <textarea className="form-input form-textarea" name="bio" value={guestDraft.bio} onChange={handleGuestInputChange} placeholder="Short guest bio and expertise"></textarea>
            </div>
            <div className="form-group">
              <label className="form-label">Notes</label>
              <textarea className="form-input form-textarea" name="notes" value={guestDraft.notes} onChange={handleGuestInputChange} placeholder="Prep notes, booking details, preferences"></textarea>
            </div>
            {guestFormError && <div className="form-error">{guestFormError}</div>}
            <div className="form-actions">
              <button type="button" className="btn-secondary" onClick={() => setShowGuestForm(false)}>
                Cancel
              </button>
              <button type="submit" className="btn-primary" disabled={guestsLoading}>
                {guestsLoading ? 'Saving...' : 'Create Guest'}
              </button>
            </div>
          </form>

          <div className="guest-list">
            {guestOptions.length === 0 ? (
              <div className="empty-text">No guests yet. Add one above to start linking appearances.</div>
            ) : (
              guestOptions.map((guest) => {
                const guestId = guest.id || guest._id || guest.docId;
                const appearances = Array.isArray(guest.pastAppearances) ? guest.pastAppearances.length : 0;
                return (
                  <button key={guestId} type="button" className={`guest-item ${String(selectedGuestId) === String(guestId) ? 'active' : ''}`} onClick={() => setSelectedGuestId(guestId)}>
                    <div className="guest-item-main">
                      <strong>{guest.name}</strong>
                      <span>{guest.email || 'No email'}</span>
                    </div>
                    <div className="guest-item-meta">{appearances} past appearance{appearances === 1 ? '' : 's'}</div>
                  </button>
                );
              })
            )}
          </div>
        </section>
      )}

      <StatsHeader />
      <EpisodeBoard onEdit={handleEdit} />
      {showForm && (
        <div>
          <EpisodeForm episode={editingEpisode} onClose={handleCloseForm} />
          <div className="guest-link-panel">
            <div className="guest-panel-header">
              <h2 className="section-title">Link a Guest to This Episode</h2>
              <p className="section-subtitle">Select an existing guest and record this episode in their past appearances.</p>
            </div>
            <form className="guest-link-form" onSubmit={handleLinkGuestToEpisode}>
              <select className="form-input form-select" value={selectedGuestId} onChange={(e) => setSelectedGuestId(e.target.value)}>
                <option value="">Select a guest</option>
                {guestOptions.map((guest) => {
                  const guestId = guest.id || guest._id || guest.docId;
                  return (
                    <option key={guestId} value={guestId}>
                      {guest.name}
                    </option>
                  );
                })}
              </select>
              <div className="form-actions">
                <button type="submit" className="btn-primary" disabled={!selectedGuestId}>
                  Link Guest Appearance
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

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