'use client';

import { TabProps } from '../types';
import { TIMEZONES } from '@/lib/timezones';

export function GeneralTab({ data, onChange, errors, canUpdate }: TabProps) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Site Name *
        </label>
        <input
          type="text"
          value={data.site_name || ''}
          onChange={(e) => onChange('site_name', e.target.value)}
          disabled={!canUpdate}
          placeholder="e.g., DesiCart.pk"
          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
          style={{
            background: 'var(--color-surface-alt)',
            border: `1px solid ${errors.site_name ? 'var(--color-danger)' : 'var(--color-border)'}`,
            color: 'var(--color-text)',
          }}
        />
        {errors.site_name && (
          <p className="text-xs mt-1" style={{ color: 'var(--color-danger)' }}>{errors.site_name}</p>
        )}
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Your website name displayed in the header and browser tab
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Site Tagline
        </label>
        <input
          type="text"
          value={data.site_tagline || ''}
          onChange={(e) => onChange('site_tagline', e.target.value)}
          disabled={!canUpdate}
          placeholder="e.g., Pakistan's Best Online Store"
          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
          style={{
            background: 'var(--color-surface-alt)',
            border: '1px solid var(--color-border)',
            color: 'var(--color-text)',
          }}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          A short description of your website (displayed in search results)
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Currency Display Format
        </label>
        <select
          value={data.currency_display_format || 'symbol'}
          onChange={(e) => onChange('currency_display_format', e.target.value)}
          disabled={!canUpdate}
          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
          style={{
            background: 'var(--color-surface-alt)',
            border: '1px solid var(--color-border)',
            color: 'var(--color-text)',
          }}
        >
          <option value="symbol">Symbol ($, €, £)</option>
          <option value="code">Code (USD, EUR)</option>
          <option value="both">Both ($ USD)</option>
        </select>
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          How currency should be displayed across the store
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Homepage Layout
        </label>
        <select
          value={data.homepage_layout || 'home1'}
          onChange={(e) => onChange('homepage_layout', e.target.value)}
          disabled={!canUpdate}
          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
          style={{
            background: 'var(--color-surface-alt)',
            border: '1px solid var(--color-border)',
            color: 'var(--color-text)',
          }}
        >
          <option value="home1">Home 1 (Default)</option>
          <option value="home2">Home 2 (Modern)</option>
          <option value="home3">Home 3 (Minimal)</option>
        </select>
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Select which homepage design to display
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Timezone
          </label>
          <select
            value={data.timezone || 'Asia/Karachi'}
            onChange={(e) => onChange('timezone', e.target.value)}
            disabled={!canUpdate}
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
            style={{
              background: 'var(--color-surface-alt)',
              border: '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          >
            {TIMEZONES.map((tz) => (
              <option key={tz.value} value={tz.value}>
                {tz.label}
              </option>
            ))}
          </select>
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            Server timezone for date/time calculations
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Date Format
          </label>
          <input
            type="text"
            value={data.date_format || 'd M Y'}
            onChange={(e) => onChange('date_format', e.target.value)}
            disabled={!canUpdate}
            placeholder="e.g., d M Y"
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
            style={{
              background: 'var(--color-surface-alt)',
              border: '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          />
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            d = day (01-31), M = month (Jan-Dec), Y = year (2024)
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Time Format
          </label>
          <input
            type="text"
            value={data.time_format || 'h:i A'}
            onChange={(e) => onChange('time_format', e.target.value)}
            disabled={!canUpdate}
            placeholder="e.g., h:i A"
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
            style={{
              background: 'var(--color-surface-alt)',
              border: '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          />
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            h = hour (01-12), i = minutes, A = AM/PM
          </p>
        </div>
      </div>
    </div>
  );
}