import React, { useState, useEffect } from 'react';
import { SettingsLayout } from './components/SettingsLayout';
import { SettingsCard } from './components/SettingsCard';
import { SettingsSection } from './components/SettingsSection';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { toast } from 'sonner';

interface StoreSettings {
  storeName: string;
  contactEmail: string;
  supportEmail: string;
  phone: string;
  country: string;
  address: string;
  city: string;
  state: string;
  postcode: string;
  currency: string;
  currencyPosition: 'left' | 'right' | 'left_space' | 'right_space';
  thousandSep: string;
  decimalSep: string;
  decimals: number;
  timezone: string;
  weightUnit: string;
  dimensionUnit: string;
}

export default function StoreDetailsPage() {
  const [isLoading, setIsLoading] = useState(true);
  const [settings, setSettings] = useState<StoreSettings>({
    storeName: '',
    contactEmail: '',
    supportEmail: '',
    phone: '',
    country: 'ID',
    address: '',
    city: '',
    state: '',
    postcode: '',
    currency: 'IDR',
    currencyPosition: 'left',
    thousandSep: ',',
    decimalSep: '.',
    decimals: 0,
    timezone: 'Asia/Jakarta',
    weightUnit: 'kg',
    dimensionUnit: 'cm',
  });

  useEffect(() => {
    // TODO: Load settings from API
    setTimeout(() => {
      setSettings({
        storeName: 'WooNooW Store',
        contactEmail: 'contact@example.com',
        supportEmail: 'support@example.com',
        phone: '+62 812 3456 7890',
        country: 'ID',
        address: 'Jl. Example No. 123',
        city: 'Jakarta',
        state: 'DKI Jakarta',
        postcode: '12345',
        currency: 'IDR',
        currencyPosition: 'left',
        thousandSep: '.',
        decimalSep: ',',
        decimals: 0,
        timezone: 'Asia/Jakarta',
        weightUnit: 'kg',
        dimensionUnit: 'cm',
      });
      setIsLoading(false);
    }, 500);
  }, []);

  const handleSave = async () => {
    // TODO: Save to API
    await new Promise((resolve) => setTimeout(resolve, 1000));
    toast.success('Your store details have been updated successfully.');
  };

  const updateSetting = <K extends keyof StoreSettings>(
    key: K,
    value: StoreSettings[K]
  ) => {
    setSettings((prev) => ({ ...prev, [key]: value }));
  };

  // Currency preview
  const formatCurrency = (amount: number) => {
    const formatted = amount.toFixed(settings.decimals)
      .replace('.', settings.decimalSep)
      .replace(/\B(?=(\d{3})+(?!\d))/g, settings.thousandSep);
    
    const symbol = settings.currency === 'IDR' ? 'Rp' : settings.currency === 'USD' ? '$' : '€';
    
    switch (settings.currencyPosition) {
      case 'left':
        return `${symbol}${formatted}`;
      case 'right':
        return `${formatted}${symbol}`;
      case 'left_space':
        return `${symbol} ${formatted}`;
      case 'right_space':
        return `${formatted} ${symbol}`;
      default:
        return `${symbol}${formatted}`;
    }
  };

  return (
    <SettingsLayout
      title="Store Details"
      description="Manage your store's basic information and regional settings"
      onSave={handleSave}
      isLoading={isLoading}
    >
      {/* Store Identity */}
      <SettingsCard
        title="Store Identity"
        description="Basic information about your store"
      >
        <SettingsSection label="Store name" required htmlFor="storeName">
          <Input
            id="storeName"
            value={settings.storeName}
            onChange={(e) => updateSetting('storeName', e.target.value)}
            placeholder="My Awesome Store"
          />
        </SettingsSection>

        <SettingsSection
          label="Contact email"
          description="Customers will use this email to contact you"
          htmlFor="contactEmail"
        >
          <Input
            id="contactEmail"
            type="email"
            value={settings.contactEmail}
            onChange={(e) => updateSetting('contactEmail', e.target.value)}
            placeholder="contact@example.com"
          />
        </SettingsSection>

        <SettingsSection
          label="Customer support email"
          description="Separate email for customer support inquiries"
          htmlFor="supportEmail"
        >
          <Input
            id="supportEmail"
            type="email"
            value={settings.supportEmail}
            onChange={(e) => updateSetting('supportEmail', e.target.value)}
            placeholder="support@example.com"
          />
        </SettingsSection>

        <SettingsSection
          label="Store phone"
          description="Optional phone number for customer inquiries"
          htmlFor="phone"
        >
          <Input
            id="phone"
            type="tel"
            value={settings.phone}
            onChange={(e) => updateSetting('phone', e.target.value)}
            placeholder="+62 812 3456 7890"
          />
        </SettingsSection>
      </SettingsCard>

      {/* Store Address */}
      <SettingsCard
        title="Store Address"
        description="Used for shipping origin, invoices, and tax calculations"
      >
        <SettingsSection label="Country/Region" required htmlFor="country">
          <Select value={settings.country} onValueChange={(v) => updateSetting('country', v)}>
            <SelectTrigger id="country">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="ID">🇮🇩 Indonesia</SelectItem>
              <SelectItem value="US">🇺🇸 United States</SelectItem>
              <SelectItem value="SG">🇸🇬 Singapore</SelectItem>
              <SelectItem value="MY">🇲🇾 Malaysia</SelectItem>
              <SelectItem value="TH">🇹🇭 Thailand</SelectItem>
            </SelectContent>
          </Select>
        </SettingsSection>

        <SettingsSection label="Street address" htmlFor="address">
          <Input
            id="address"
            value={settings.address}
            onChange={(e) => updateSetting('address', e.target.value)}
            placeholder="Jl. Example No. 123"
          />
        </SettingsSection>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <SettingsSection label="City" htmlFor="city">
            <Input
              id="city"
              value={settings.city}
              onChange={(e) => updateSetting('city', e.target.value)}
              placeholder="Jakarta"
            />
          </SettingsSection>

          <SettingsSection label="State/Province" htmlFor="state">
            <Input
              id="state"
              value={settings.state}
              onChange={(e) => updateSetting('state', e.target.value)}
              placeholder="DKI Jakarta"
            />
          </SettingsSection>

          <SettingsSection label="Postal code" htmlFor="postcode">
            <Input
              id="postcode"
              value={settings.postcode}
              onChange={(e) => updateSetting('postcode', e.target.value)}
              placeholder="12345"
            />
          </SettingsSection>
        </div>
      </SettingsCard>

      {/* Currency & Formatting */}
      <SettingsCard
        title="Currency & Formatting"
        description="How prices are displayed in your store"
      >
        <SettingsSection label="Currency" required htmlFor="currency">
          <Select value={settings.currency} onValueChange={(v) => updateSetting('currency', v)}>
            <SelectTrigger id="currency">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="IDR">Indonesian Rupiah (Rp)</SelectItem>
              <SelectItem value="USD">US Dollar ($)</SelectItem>
              <SelectItem value="EUR">Euro (€)</SelectItem>
              <SelectItem value="SGD">Singapore Dollar (S$)</SelectItem>
              <SelectItem value="MYR">Malaysian Ringgit (RM)</SelectItem>
            </SelectContent>
          </Select>
        </SettingsSection>

        <SettingsSection label="Currency position" htmlFor="currencyPosition">
          <Select
            value={settings.currencyPosition}
            onValueChange={(v: any) => updateSetting('currencyPosition', v)}
          >
            <SelectTrigger id="currencyPosition">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="left">Left (Rp1234)</SelectItem>
              <SelectItem value="right">Right (1234Rp)</SelectItem>
              <SelectItem value="left_space">Left with space (Rp 1234)</SelectItem>
              <SelectItem value="right_space">Right with space (1234 Rp)</SelectItem>
            </SelectContent>
          </Select>
        </SettingsSection>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <SettingsSection label="Thousand separator" htmlFor="thousandSep">
            <Input
              id="thousandSep"
              value={settings.thousandSep}
              onChange={(e) => updateSetting('thousandSep', e.target.value)}
              maxLength={1}
              placeholder=","
            />
          </SettingsSection>

          <SettingsSection label="Decimal separator" htmlFor="decimalSep">
            <Input
              id="decimalSep"
              value={settings.decimalSep}
              onChange={(e) => updateSetting('decimalSep', e.target.value)}
              maxLength={1}
              placeholder="."
            />
          </SettingsSection>

          <SettingsSection label="Number of decimals" htmlFor="decimals">
            <Select
              value={settings.decimals.toString()}
              onValueChange={(v) => updateSetting('decimals', parseInt(v))}
            >
              <SelectTrigger id="decimals">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="0">0</SelectItem>
                <SelectItem value="1">1</SelectItem>
                <SelectItem value="2">2</SelectItem>
                <SelectItem value="3">3</SelectItem>
                <SelectItem value="4">4</SelectItem>
              </SelectContent>
            </Select>
          </SettingsSection>
        </div>

        {/* Live Preview */}
        <div className="mt-4 p-4 bg-muted rounded-lg">
          <p className="text-sm text-muted-foreground mb-2">Preview:</p>
          <p className="text-2xl font-semibold">{formatCurrency(1234567.89)}</p>
        </div>
      </SettingsCard>

      {/* Standards & Formats */}
      <SettingsCard
        title="Standards & Formats"
        description="Timezone and measurement units"
      >
        <SettingsSection label="Timezone" htmlFor="timezone">
          <Select value={settings.timezone} onValueChange={(v) => updateSetting('timezone', v)}>
            <SelectTrigger id="timezone">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="Asia/Jakarta">Asia/Jakarta (WIB)</SelectItem>
              <SelectItem value="Asia/Makassar">Asia/Makassar (WITA)</SelectItem>
              <SelectItem value="Asia/Jayapura">Asia/Jayapura (WIT)</SelectItem>
              <SelectItem value="Asia/Singapore">Asia/Singapore</SelectItem>
              <SelectItem value="America/New_York">America/New_York (EST)</SelectItem>
            </SelectContent>
          </Select>
        </SettingsSection>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <SettingsSection label="Weight unit" htmlFor="weightUnit">
            <Select value={settings.weightUnit} onValueChange={(v) => updateSetting('weightUnit', v)}>
              <SelectTrigger id="weightUnit">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="kg">Kilogram (kg)</SelectItem>
                <SelectItem value="g">Gram (g)</SelectItem>
                <SelectItem value="lb">Pound (lb)</SelectItem>
                <SelectItem value="oz">Ounce (oz)</SelectItem>
              </SelectContent>
            </Select>
          </SettingsSection>

          <SettingsSection label="Dimension unit" htmlFor="dimensionUnit">
            <Select value={settings.dimensionUnit} onValueChange={(v) => updateSetting('dimensionUnit', v)}>
              <SelectTrigger id="dimensionUnit">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="cm">Centimeter (cm)</SelectItem>
                <SelectItem value="m">Meter (m)</SelectItem>
                <SelectItem value="in">Inch (in)</SelectItem>
                <SelectItem value="ft">Foot (ft)</SelectItem>
              </SelectContent>
            </Select>
          </SettingsSection>
        </div>
      </SettingsCard>

      {/* Summary Card */}
      <div className="bg-primary/10 border border-primary/20 rounded-lg p-4">
        <p className="text-sm font-medium">
          🇮🇩 Your store is located in {settings.country === 'ID' ? 'Indonesia' : settings.country}
        </p>
        <p className="text-sm text-muted-foreground mt-1">
          Prices will be displayed in {settings.currency} • Timezone: {settings.timezone}
        </p>
      </div>
    </SettingsLayout>
  );
}