smoothschedule/frontend/src/puck/components/contact/AddressBlock.tsx

import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import { MapPin, Phone, Mail, Building2 } from 'lucide-react';

export interface AddressBlockProps {
  businessName?: string;
  address?: string;
  address2?: string;
  city?: string;
  state?: string;
  zip?: string;
  phone?: string;
  email?: string;
  showIcons: boolean;
  layout: 'vertical' | 'horizontal';
  alignment: 'left' | 'center' | 'right';
}

const formatPhone = (phone: string): string => {
  // Remove all non-digits
  const digits = phone.replace(/\D/g, '');

  // Format as (XXX) XXX-XXXX if 10 digits
  if (digits.length === 10) {
    return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
  }

  // Return original if not 10 digits
  return phone;
};

const AddressBlockRender: React.FC<AddressBlockProps> = ({
  businessName,
  address,
  address2,
  city,
  state,
  zip,
  phone,
  email,
  showIcons = true,
  layout = 'vertical',
  alignment = 'left',
}) => {
  const alignmentClasses = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  };

  const justifyClasses = {
    left: 'justify-start',
    center: 'justify-center',
    right: 'justify-end',
  };

  // Build full address string
  const addressParts = [];
  if (address) addressParts.push(address);
  if (address2) addressParts.push(address2);

  const cityStateZip = [city, state].filter(Boolean).join(', ');
  const fullCityLine = [cityStateZip, zip].filter(Boolean).join(' ');
  if (fullCityLine) addressParts.push(fullCityLine);

  const fullAddress = addressParts.join(', ');

  const items = [
    { icon: Building2, value: businessName, href: null },
    { icon: MapPin, value: fullAddress, href: fullAddress ? `https://maps.google.com/?q=${encodeURIComponent(fullAddress)}` : null },
    { icon: Phone, value: phone ? formatPhone(phone) : null, href: phone ? `tel:${phone.replace(/\D/g, '')}` : null },
    { icon: Mail, value: email, href: email ? `mailto:${email}` : null },
  ].filter(item => item.value);

  if (items.length === 0) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center text-gray-500">
        Add your business contact information
      </div>
    );
  }

  if (layout === 'horizontal') {
    return (
      <div className={`bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6`}>
        <div className={`flex flex-wrap gap-6 ${justifyClasses[alignment]}`}>
          {items.map(({ icon: Icon, value, href }, index) => (
            <div key={index} className="flex items-center gap-2">
              {showIcons && (
                <Icon className="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0" />
              )}
              {href ? (
                <a
                  href={href}
                  target={href.startsWith('https') ? '_blank' : undefined}
                  rel={href.startsWith('https') ? 'noopener noreferrer' : undefined}
                  className="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
                >
                  {value}
                </a>
              ) : (
                <span className="text-gray-900 dark:text-white font-medium">{value}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className={`bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 ${alignmentClasses[alignment]}`}>
      <div className={`space-y-4 ${alignment === 'center' ? 'flex flex-col items-center' : ''}`}>
        {items.map(({ icon: Icon, value, href }, index) => (
          <div key={index} className={`flex items-start gap-3 ${justifyClasses[alignment]}`}>
            {showIcons && (
              <Icon className="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0 mt-0.5" />
            )}
            {href ? (
              <a
                href={href}
                target={href.startsWith('https') ? '_blank' : undefined}
                rel={href.startsWith('https') ? 'noopener noreferrer' : undefined}
                className="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
              >
                {value}
              </a>
            ) : (
              <span className="text-gray-900 dark:text-white font-semibold text-lg">{value}</span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export const AddressBlock: ComponentConfig<AddressBlockProps> = {
  label: 'Address Block',
  fields: {
    businessName: {
      type: 'text',
      label: 'Business Name',
    },
    address: {
      type: 'text',
      label: 'Street Address',
    },
    address2: {
      type: 'text',
      label: 'Address Line 2 (Suite, Unit, etc.)',
    },
    city: {
      type: 'text',
      label: 'City',
    },
    state: {
      type: 'text',
      label: 'State',
    },
    zip: {
      type: 'text',
      label: 'ZIP Code',
    },
    phone: {
      type: 'text',
      label: 'Phone Number',
    },
    email: {
      type: 'text',
      label: 'Email Address',
    },
    showIcons: {
      type: 'radio',
      label: 'Show Icons',
      options: [
        { label: 'Yes', value: true },
        { label: 'No', value: false },
      ],
    },
    layout: {
      type: 'select',
      label: 'Layout',
      options: [
        { label: 'Vertical (Stacked)', value: 'vertical' },
        { label: 'Horizontal (Inline)', value: 'horizontal' },
      ],
    },
    alignment: {
      type: 'select',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
  },
  defaultProps: {
    businessName: '',
    address: '',
    address2: '',
    city: '',
    state: '',
    zip: '',
    phone: '',
    email: '',
    showIcons: true,
    layout: 'vertical',
    alignment: 'left',
  },
  render: AddressBlockRender,
};

export default AddressBlock;