import React from 'react';
import { View, StyleSheet } from 'react-native';
import { colors } from '../lib/theme';

interface PotteryIconProps {
  color: string;
  finish?: 'glossy' | 'matte' | 'satin' | 'unknown';
  size?: number;
}

export const PotteryIcon: React.FC<PotteryIconProps> = ({
  color,
  finish = 'unknown',
  size = 60
}) => {
  // Different pottery shapes based on finish type using View components
  const renderShape = () => {
    const shapeStyle = {
      backgroundColor: color,
      width: size,
      height: size,
    };

    switch (finish) {
      case 'glossy':
        // Vase shape - wider at bottom, narrower at top
        return (
          <View style={{ alignItems: 'center' }}>
            <View style={[styles.vaseTop, { width: size * 0.4, height: size * 0.15, backgroundColor: color }]} />
            <View style={[styles.vaseNeck, { width: size * 0.5, height: size * 0.25, backgroundColor: color }]} />
            <View style={[styles.vaseBody, { width: size * 0.8, height: size * 0.5, backgroundColor: color }]} />
            <View style={[styles.vaseBase, { width: size * 0.6, height: size * 0.1, backgroundColor: color }]} />
            {/* Glossy shine effect */}
            <View style={[styles.shine, { top: size * 0.2, left: size * 0.2 }]} />
          </View>
        );

      case 'matte':
        // Bowl shape - smooth trapezoid with many layers
        const numLayers = 20;
        const startWidth = 0.9; // Top width (90% of size)
        const endWidth = 0.4;   // Bottom width (40% of size)
        const layerHeight = size / numLayers;

        return (
          <View style={{ alignItems: 'center', justifyContent: 'center', height: size, width: size }}>
            {Array.from({ length: numLayers }).map((_, index) => {
              // Calculate width for this layer (gradually narrowing from top to bottom)
              const progress = index / (numLayers - 1);
              const layerWidth = startWidth - (startWidth - endWidth) * progress;

              const isFirst = index === 0;
              const isLast = index === numLayers - 1;

              return (
                <View
                  key={index}
                  style={[
                    isFirst ? styles.bowlTop : isLast ? styles.bowlBase : styles.bowlLayer,
                    {
                      width: size * layerWidth,
                      height: layerHeight,
                      backgroundColor: color,
                      borderTopLeftRadius: isFirst ? size * 0.15 : 0,
                      borderTopRightRadius: isFirst ? size * 0.15 : 0,
                      borderBottomLeftRadius: isLast ? size * 0.08 : 0,
                      borderBottomRightRadius: isLast ? size * 0.08 : 0,
                    }
                  ]}
                />
              );
            })}
          </View>
        );

      case 'satin':
        // Mug shape - cylinder with handle
        return (
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <View style={{ alignItems: 'center' }}>
              <View style={[styles.mugRim, { width: size * 0.6, height: size * 0.1, backgroundColor: color }]} />
              <View style={[styles.mugBody, { width: size * 0.6, height: size * 0.7, backgroundColor: color }]} />
              <View style={[styles.mugBase, { width: size * 0.6, height: size * 0.2, backgroundColor: color }]} />
            </View>
            <View style={[styles.handle, { borderColor: color, marginLeft: -size * 0.1 }]} />
          </View>
        );

      default:
        // Simple circular swatch for unknown finish
        return (
          <View style={[styles.circle, shapeStyle]} />
        );
    }
  };

  return (
    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
      {renderShape()}
    </View>
  );
};

const styles = StyleSheet.create({
  // Vase styles
  vaseTop: {
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
    borderWidth: 1,
    borderColor: colors.border,
  },
  vaseNeck: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: colors.border,
  },
  vaseBody: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: colors.border,
    borderRadius: 8,
  },
  vaseBase: {
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    borderWidth: 1,
    borderColor: colors.border,
  },
  shine: {
    position: 'absolute',
    width: 8,
    height: 12,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    borderRadius: 4,
  },

  // Bowl styles - trapezoid bowl shape
  bowlTop: {
    borderTopWidth: 2,
    borderLeftWidth: 2,
    borderRightWidth: 2,
    borderColor: colors.border,
    marginTop: -1, // Overlap to connect
  },
  bowlLayer: {
    borderLeftWidth: 2,
    borderRightWidth: 2,
    borderColor: colors.border,
    marginTop: -1, // Overlap to connect smoothly
  },
  bowlBase: {
    borderBottomWidth: 2,
    borderLeftWidth: 2,
    borderRightWidth: 2,
    borderColor: colors.border,
    marginTop: -1, // Overlap to connect
  },

  // Mug styles
  mugRim: {
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
    borderTopWidth: 2,
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: colors.border,
  },
  mugBody: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: colors.border,
  },
  mugBase: {
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    borderBottomWidth: 2,
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: colors.border,
  },
  handle: {
    width: 15,
    height: 25,
    borderWidth: 2,
    borderLeftWidth: 0,
    borderRadius: 8,
    backgroundColor: 'transparent',
  },

  // Default circle
  circle: {
    borderRadius: 100,
    borderWidth: 2,
    borderColor: colors.border,
  },
});
