import { motion } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { ReimaginePanel } from '../../../studio/ReimaginePanel';
import { useClientProperties } from '../../../../shared/hooks/useClient360';
import styles from './Properties.module.css';

/**
 * Properties Tab
 * Shows property interests linked to this client.
 * "Stage It" triggers ReimaginePanel inline — no navigation to Studio/Catalyst.
 * "Share Brochure" generates Vault link — one tap, no modal.
 */

interface PropertiesTabProps {
  personId: string;
}

export function PropertiesTab({ personId }: PropertiesTabProps) {
  const navigate = useNavigate();
  const { properties, isLoading } = useClientProperties(personId);
  const [reimagining, setReimagining] = useState<string | null>(null); // propertyId

  if (isLoading) {
    return (
      <div className={styles.root}>
        {[0, 1].map(i => <div key={i} className={`${styles.skeleton} shimmer`} />)}
      </div>
    );
  }

  return (
    <div className={styles.root}>
      {properties.map((prop, i) => (
        <motion.div
          key={prop.id}
          className={`${styles.propertyCard} glass-card`}
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: i * 0.08, duration: 0.3 }}
        >
          {/* Thumbnail */}
          <div className={styles.thumbnail}>
            {prop.thumbnailUrl
              ? <img src={prop.thumbnailUrl} alt={prop.unitName} />
              : <div className={styles.thumbPlaceholder}>🏙</div>
            }
            {prop.isPrimary && (
              <span className={`badge badge-high-intent ${styles.primaryBadge}`}>
                ★ Primary
              </span>
            )}
          </div>

          {/* Details */}
          <div className={styles.details}>
            <h3 className={styles.unitName}>{prop.projectName} · {prop.unitName}</h3>
            <p className={styles.unitMeta}>
              {prop.config} · {prop.area} · {prop.price}
            </p>
            <p className={styles.engagementLabel}
              style={{ color: prop.engagementLevel === 'High' ? 'var(--color-green)' : 'var(--color-text-secondary)' }}>
              {prop.engagementLevel} Engagement
            </p>

            {/* Actions */}
            <div className={styles.propActions}>
              <button
                className="btn-ghost"
                onClick={() => navigate(`/studio/${prop.id}`)}
              >
                View Unit
              </button>
              <button
                className="btn-ghost"
                onClick={() => {/* generate vault link + copy */}}
              >
                Share Brochure
              </button>
              <button
                className="btn-primary"
                onClick={() => setReimagining(
                  reimagining === prop.id ? null : prop.id
                )}
              >
                ✨ Stage It
              </button>
            </div>
          </div>

          {/* Inline ReimaginePanel — no navigation to Studio */}
          <AnimatedCollapse open={reimagining === prop.id}>
            <div className={styles.reimagineWrap}>
              <ReimaginePanel
                propertyId={prop.id}
                roomImageUrl={prop.thumbnailUrl}
                onResultSaved={() => setReimagining(null)}
              />
            </div>
          </AnimatedCollapse>
        </motion.div>
      ))}

      {properties.length === 0 && (
        <p className={styles.empty}>No property interests linked yet.</p>
      )}
    </div>
  );
}

function AnimatedCollapse({ open, children }: { open: boolean; children: React.ReactNode }) {
  return (
    <motion.div
      style={{ overflow: 'hidden' }}
      animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
      transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
    >
      {children}
    </motion.div>
  );
}
