import { useState } from 'react';

interface SquarespaceWidgetProps {
  companyName?: string;
  companyPhone?: string;
  companyEmail?: string;
  primaryColor?: string;
  accentColor?: string;
  showCTA?: boolean;
  compact?: boolean;
}

export function SquarespaceWidget({
  companyName = "Home Builders Pro",
  companyPhone = "(555) 123-4567",
  companyEmail = "info@homebuilders.com",
  primaryColor = "#3b82f6",
  accentColor = "#1e40af",
  showCTA = true,
  compact = false
}: SquarespaceWidgetProps) {
  const [activeStep, setActiveStep] = useState<number | null>(null);

  const homeImprovementProcess = [
    {
      id: 1,
      title: "Initial Consultation",
      description: "We discuss your vision, needs, and budget to create a tailored plan for your project.",
      icon: "💬",
      duration: "1-2 days",
      details: [
        "In-home assessment and measurements",
        "Discussion of your goals and preferences",
        "Budget planning and timeline overview",
        "Initial design concepts and ideas"
      ]
    },
    {
      id: 2,
      title: "Design & Planning",
      description: "Our team creates detailed designs and obtains all necessary permits and approvals.",
      icon: "📐",
      duration: "1-2 weeks",
      details: [
        "3D renderings and detailed plans",
        "Material selection and sourcing",
        "Permit applications and approvals",
        "Final contract and timeline confirmation"
      ]
    },
    {
      id: 3,
      title: "Preparation & Setup",
      description: "We prepare your space and set up our work area with safety measures in place.",
      icon: "🔧",
      duration: "1-2 days",
      details: [
        "Site protection and safety setup",
        "Material delivery and staging",
        "Utility marking and disconnection if needed",
        "Final walkthrough and project kickoff"
      ]
    },
    {
      id: 4,
      title: "Construction & Installation",
      description: "Our skilled craftsmen bring your vision to life with quality workmanship.",
      icon: "🏗️",
      duration: "2-8 weeks",
      details: [
        "Daily progress updates and communication",
        "Quality control at each phase",
        "Regular cleanup and site maintenance",
        "Flexible scheduling around your needs"
      ]
    },
    {
      id: 5,
      title: "Final Inspection & Completion",
      description: "We ensure everything meets our high standards and your complete satisfaction.",
      icon: "✅",
      duration: "1-2 days",
      details: [
        "Comprehensive quality inspection",
        "Final walkthrough with you",
        "Touch-ups and final adjustments",
        "Warranty and maintenance information"
      ]
    }
  ];

  const generateSquarespaceCode = () => {
    return `<!-- Home Improvement Process Widget for Squarespace -->
<style>
  .hiw-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    --primary-color: ${primaryColor};
    --accent-color: ${accentColor};
  }
  
  .hiw-widget * {
    box-sizing: border-box;
  }
  
  .hiw-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .hiw-company-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-color);
  }
  
  .hiw-title {
    font-size: ${compact ? '1.75rem' : '2.25rem'};
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a1a1a;
  }
  
  .hiw-subtitle {
    font-size: ${compact ? '1rem' : '1.125rem'};
    color: #6b7280;
    max-width: 42rem;
    margin: 0 auto;
  }
  
  ${showCTA ? `
  .hiw-cta-banner {
    background: linear-gradient(to right, ${primaryColor}08, ${accentColor}08);
    border: 2px solid ${primaryColor}40;
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  
  .hiw-cta-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
  }
  
  .hiw-cta-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  
  .hiw-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    font-size: 0.875rem;
  }
  
  .hiw-btn-primary {
    background-color: var(--primary-color);
    color: white;
  }
  
  .hiw-btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: white;
  }
  
  .hiw-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  ` : ''}
  
  .hiw-process-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .hiw-process-header h2 {
    font-size: ${compact ? '1.5rem' : '1.875rem'};
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
  }
  
  .hiw-step {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: ${compact ? '1.5rem' : '2rem'};
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .hiw-step:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .hiw-step-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px ${primaryColor}20;
  }
  
  .hiw-step-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .hiw-step-icon {
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: ${primaryColor}15;
    flex-shrink: 0;
  }
  
  .hiw-step-content {
    flex: 1;
  }
  
  .hiw-step-title {
    font-size: ${compact ? '1.125rem' : '1.25rem'};
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
  }
  
  .hiw-step-duration {
    background: #f3f4f6;
    color: #374151;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    margin-left: 1rem;
    display: inline-block;
  }
  
  .hiw-step-description {
    color: #6b7280;
    margin-bottom: 1rem;
    font-size: ${compact ? '0.875rem' : '1rem'};
  }
  
  .hiw-step-details {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .hiw-step-details li {
    padding: 0.25rem 0;
    padding-left: 1rem;
    position: relative;
    font-size: 0.875rem;
    color: #4b5563;
  }
  
  .hiw-step-details li:before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
  }
  
  .hiw-timeline-summary {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .hiw-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(${compact ? '120px' : '150px'}, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .hiw-timeline-item {
    text-align: center;
  }
  
  .hiw-timeline-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: ${primaryColor}15;
  }
  
  .hiw-timeline-notice {
    background: ${primaryColor}08;
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: ${accentColor};
  }
  
  .hiw-trust-indicators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
  
  .hiw-trust-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .hiw-trust-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  
  .hiw-trust-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #1a1a1a;
  }
  
  @media (max-width: 768px) {
    .hiw-widget {
      padding: 1rem 0.5rem;
    }
    
    ${showCTA ? `
    .hiw-cta-banner {
      flex-direction: column;
      text-align: center;
      padding: 1.5rem;
    }
    ` : ''}
    
    .hiw-step-header {
      flex-direction: column;
      text-align: center;
    }
    
    .hiw-timeline-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .hiw-step {
      padding: 1rem;
    }
  }
</style>

<div class="hiw-widget">
  <!-- Header -->
  <div class="hiw-header">
    <div class="hiw-company-name">
      🏠 ${companyName}
    </div>
    <h1 class="hiw-title">Our Proven Process</h1>
    <p class="hiw-subtitle">
      From initial consultation to final walkthrough, we guide you through every step 
      of your home improvement journey with transparency and expertise.
    </p>
  </div>

  ${showCTA ? `
  <!-- CTA Banner -->
  <div class="hiw-cta-banner">
    <div class="hiw-cta-content">
      <h3>Ready to Get Started?</h3>
      <p style="color: #6b7280; margin: 0;">Schedule your free consultation and let's bring your vision to life.</p>
    </div>
    <div class="hiw-cta-buttons">
      <a href="tel:${companyPhone}" class="hiw-btn hiw-btn-primary">
        📅 Schedule Consultation
      </a>
      <a href="tel:${companyPhone}" class="hiw-btn hiw-btn-outline">
        📞 Call Now
      </a>
    </div>
  </div>
  ` : ''}

  <!-- Process Steps -->
  <div class="hiw-process-section">
    <div class="hiw-process-header">
      <h2>How We Work</h2>
      <p style="color: #6b7280; margin: 0;">${compact ? 'Our step-by-step process' : 'Click on any step to learn more about what to expect'}</p>
    </div>
    <div class="hiw-steps">
      ${homeImprovementProcess.map(step => `
        <div class="hiw-step" onclick="toggleStep(${step.id})">
          <div class="hiw-step-header">
            <div class="hiw-step-icon">${step.icon}</div>
            <div class="hiw-step-content">
              <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
                <h3 class="hiw-step-title">${step.title}</h3>
                <span class="hiw-step-duration">${step.duration}</span>
              </div>
              <p class="hiw-step-description">${step.description}</p>
              <ul class="hiw-step-details" id="details-${step.id}" style="display: none;">
                ${step.details.map(detail => `<li>${detail}</li>`).join('')}
              </ul>
            </div>
          </div>
        </div>
      `).join('')}
    </div>
  </div>

  <!-- Timeline Summary -->
  <div class="hiw-timeline-summary">
    <h3 style="font-size: ${compact ? '1.125rem' : '1.25rem'}; font-weight: 600; margin-bottom: 1rem; color: #1a1a1a;">Project Timeline Overview</h3>
    <div class="hiw-timeline-grid">
      ${homeImprovementProcess.map(step => `
        <div class="hiw-timeline-item">
          <div class="hiw-timeline-icon">${step.icon}</div>
          <div style="font-size: ${compact ? '0.75rem' : '0.875rem'}; font-weight: 500; margin-bottom: 0.25rem; color: #1a1a1a;">${compact ? step.title.split(' ')[0] : step.title}</div>
          <div style="background: #f3f4f6; color: #374151; padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; display: inline-block;">
            ${step.duration}
          </div>
        </div>
      `).join('')}
    </div>
    <div class="hiw-timeline-notice">
      <div>
        📅 <strong>Typical Project Duration: 4-12 weeks</strong>
        <br><small style="margin-left: 1.5rem;">Timeline varies based on project scope and complexity. We'll provide a detailed schedule during consultation.</small>
      </div>
    </div>
  </div>

  <!-- Trust Indicators -->
  <div class="hiw-trust-indicators">
    <div class="hiw-trust-item">
      <div class="hiw-trust-icon">⭐</div>
      <h4 class="hiw-trust-title">5-Star Rated</h4>
      <p style="font-size: ${compact ? '0.75rem' : '0.875rem'}; color: #6b7280; margin: 0;">Over 200 happy customers</p>
    </div>
    <div class="hiw-trust-item">
      <div class="hiw-trust-icon">🏆</div>
      <h4 class="hiw-trust-title">Award Winning</h4>
      <p style="font-size: ${compact ? '0.75rem' : '0.875rem'}; color: #6b7280; margin: 0;">Best contractor 2023</p>
    </div>
    <div class="hiw-trust-item">
      <div class="hiw-trust-icon">🛡️</div>
      <h4 class="hiw-trust-title">Fully Licensed</h4>
      <p style="font-size: ${compact ? '0.75rem' : '0.875rem'}; color: #6b7280; margin: 0;">Insured & bonded</p>
    </div>
  </div>

  ${showCTA ? `
  <!-- Bottom CTA -->
  <div style="text-align: center; padding-top: 2rem; border-top: 1px solid #e5e7eb; margin-top: 2rem;">
    <p style="color: #6b7280; margin-bottom: 1rem;">
      Ready to transform your home? Let's discuss your project today.
    </p>
    <div style="display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;">
      <a href="mailto:${companyEmail}?subject=Free Quote Request" class="hiw-btn hiw-btn-primary">
        Get Free Quote
      </a>
      <a href="tel:${companyPhone}" class="hiw-btn hiw-btn-outline">
        ${companyPhone}
      </a>
    </div>
  </div>
  ` : ''}
</div>

<script>
  let activeStep = null;
  
  function toggleStep(stepId) {
    const details = document.getElementById('details-' + stepId);
    const step = details.closest('.hiw-step');
    
    if (activeStep === stepId) {
      // Close current step
      details.style.display = 'none';
      step.classList.remove('hiw-step-active');
      activeStep = null;
    } else {
      // Close previous step if any
      if (activeStep !== null) {
        const prevDetails = document.getElementById('details-' + activeStep);
        const prevStep = prevDetails.closest('.hiw-step');
        prevDetails.style.display = 'none';
        prevStep.classList.remove('hiw-step-active');
      }
      
      // Open new step
      details.style.display = 'block';
      step.classList.add('hiw-step-active');
      activeStep = stepId;
    }
  }
</script>`;
  };

  return (
    <div className="bg-white rounded-lg border p-6">
      <h3 className="text-lg mb-4">Squarespace Code Preview</h3>
      <p className="text-muted-foreground mb-4">
        This is how your widget will look when embedded in Squarespace. The code below contains everything needed - just copy and paste it into a code block.
      </p>
      
      {/* Widget Preview */}
      <div className="border rounded-lg p-4 mb-6 bg-gray-50">
        <div 
          className="w-full mx-auto space-y-8 max-w-4xl"
          style={{ 
            '--primary-color': primaryColor,
            '--accent-color': accentColor 
          } as React.CSSProperties}
        >
          {/* Header */}
          <div className="text-center space-y-4">
            <div className="flex items-center justify-center gap-2 mb-4" style={{ color: primaryColor }}>
              <span className="text-2xl">🏠</span>
              <span className="text-2xl font-semibold">{companyName}</span>
            </div>
            <h1 className={`${compact ? 'text-2xl' : 'text-3xl'} font-bold`}>Our Proven Process</h1>
            <p className={`${compact ? 'text-base' : 'text-lg'} text-muted-foreground max-w-2xl mx-auto`}>
              From initial consultation to final walkthrough, we guide you through every step 
              of your home improvement journey with transparency and expertise.
            </p>
          </div>

          {/* Process Steps Preview */}
          <div className="space-y-4">
            {homeImprovementProcess.map((step, index) => (
              <div 
                key={step.id} 
                className="bg-white border rounded-lg p-4 border-l-4 cursor-pointer hover:shadow-md transition-all"
                style={{ borderLeftColor: primaryColor }}
                onClick={() => setActiveStep(activeStep === step.id ? null : step.id)}
              >
                <div className="flex items-start gap-4">
                  <div 
                    className="w-12 h-12 rounded-full flex items-center justify-center text-xl flex-shrink-0"
                    style={{ backgroundColor: `${primaryColor}15` }}
                  >
                    {step.icon}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="font-semibold">{step.title}</h3>
                      <span className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
                        {step.duration}
                      </span>
                    </div>
                    <p className="text-muted-foreground mb-2">{step.description}</p>
                    {activeStep === step.id && (
                      <ul className="space-y-1">
                        {step.details.map((detail, idx) => (
                          <li key={idx} className="flex items-start gap-2 text-sm">
                            <span style={{ color: primaryColor }}>•</span>
                            <span>{detail}</span>
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Copy Code Button */}
      <div className="flex justify-end">
        <button
          onClick={() => navigator.clipboard.writeText(generateSquarespaceCode())}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          Copy Squarespace Code
        </button>
      </div>
    </div>
  );
}