import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useStudioProperties } from '../../shared/hooks/useStudio';
import styles from './StudioPillar.module.css';

/**
 * StudioPillar — Pillar 3: Asset & Marketing Hub
 * Merges: Inventory + Catalyst
 * Two sections: Properties | Campaigns
 */
export default function StudioPillar() {
  const [section, setSection] = useState<'properties' | 'campaigns'>('properties');

  return (
    <div className={styles.root}>
      <div className={styles.header}>
        <div>
          <h1 className={styles.title}>Studio</h1>
          <p className={styles.subtitle}>Asset & Marketing Hub</p>
        </div>
        <div className={styles.tabs}>
          <button
            className={section === 'properties' ? styles.tabActive : styles.tab}
            onClick={() => setSection('properties')}
          >Properties</button>
          <button
            className={section === 'campaigns' ? styles.tabActive : styles.tab}
            onClick={() => setSection('campaigns')}
          >Campaigns</button>
        </div>
      </div>

      {section === 'properties' && <PropertiesSection />}
      {section === 'campaigns'  && <CampaignsSection />}
    </div>
  );
}

// ── Properties Section ────────────────────────────────────────
function PropertiesSection() {
  const navigate = useNavigate();
  const { properties, isLoading } = useStudioProperties();

  if (isLoading) {
    return (
      <div className={styles.propGrid}>
        {[0,1,2,3,4,5].map(i => (
          <div key={i} className={`${styles.propSkeleton} shimmer`} />
        ))}
      </div>
    );
  }

  return (
    <div className={styles.propGrid}>
      {(properties || []).map((prop, i) => (
        <motion.button
          key={prop.id}
          className={`${styles.propCard} glass-card`}
          onClick={() => navigate(`/studio/${prop.id}`)}
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: i * 0.05, duration: 0.3 }}
          whileHover={{ scale: 1.03, y: -4 }}
          whileTap={{ scale: 0.99 }}
          aria-label={`View ${prop.name}`}
        >
          {/* Property thumbnail */}
          <div className={styles.propThumb}>
            {prop.thumbnailUrl
              ? <img src={prop.thumbnailUrl} alt={prop.name} />
              : <div className={styles.thumbPlaceholder}>🏗</div>
            }
            {prop.availableUnits !== undefined && (
              <span className={styles.availBadge}>
                {prop.availableUnits} available
              </span>
            )}
          </div>
          <div className={styles.propMeta}>
            <span className={styles.propName}>{prop.name}</span>
            <span className={styles.propSub}>{prop.location}</span>
            {prop.priceRange && (
              <span className={styles.propPrice}>{prop.priceRange}</span>
            )}
          </div>
        </motion.button>
      ))}
    </div>
  );
}

// ── Campaigns Section ─────────────────────────────────────────
function CampaignsSection() {
  return (
    <div className={styles.campaignsPlaceholder}>
      <p style={{ color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)' }}>
        Campaigns loading — Meta Ads integration active.
      </p>
    </div>
  );
}
