import { define } from '../src'
import { Layout, ExampleSection } from './helpers'

const UserProfile = define('UserProfile', {
  base: 'div',

  layout: {
    padding: 24,
    maxWidth: 600,
    margin: "0 auto",
  },

  look: {
    background: "white",
    borderRadius: 12,
    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
  },

  parts: {
    Header: {
      layout: {
        display: "flex",
        alignItems: "center",
        gap: 16,
        marginBottom: 16,
      },
    },
    Avatar: {
      base: 'img',
      layout: {
        width: 64,
        height: 64,
      },
      look: {
        borderRadius: "50%",
        objectFit: "cover",
        border: "3px solid #e5e7eb",
      },
    },
    Info: {
      layout: {
        flex: 1,
      },
    },
    Name: {
      layout: {
        marginBottom: 4,
      },
      look: {
        fontSize: 20,
        fontWeight: 600,
        color: "#111827",
      },
    },
    Handle: {
      look: {
        fontSize: 14,
        color: "#6b7280",
      },
    },
    Bio: {
      layout: {
        marginBottom: 16,
        width: "100%",
      },
      look: {
        fontSize: 14,
        lineHeight: 1.6,
        color: "#374151",
        wordWrap: "break-word",
      },
    },
    Stats: {
      layout: {
        display: "flex",
        gap: 24,
        paddingTop: 16,
      },
      look: {
        borderTop: "1px solid #e5e7eb",
      },
    },
    Stat: {
      layout: {
        display: "flex",
        flexDirection: "column",
        gap: 4,
      },
    },
    StatValue: {
      look: {
        fontSize: 18,
        fontWeight: 600,
        color: "#111827",
      },
    },
    StatLabel: {
      look: {
        fontSize: 12,
        color: "#6b7280",
        textTransform: "uppercase",
      },
    },
  },

  variants: {
    size: {
      compact: {
        layout: { padding: 16, maxWidth: 300 },
        parts: {
          Avatar: { layout: { width: 48, height: 48 } },
          Name: { look: { fontSize: 16 } },
          Bio: { look: { fontSize: 13 } },
        },
      },
      skinny: {
        layout: { padding: 20, maxWidth: 125 },
        parts: {
          Header: {
            layout: {
              flexDirection: "column",
              alignItems: "center",
              gap: 12,
            }
          },
          Avatar: { layout: { width: 80, height: 80 } },
          Info: { layout: { flex: 0, width: "100%" } },
          Name: { look: { textAlign: "center", fontSize: 18 } },
          Handle: { look: { textAlign: "center" } },
          Bio: { look: { textAlign: "center", fontSize: 13 } },
          Stats: {
            layout: {
              flexDirection: "column",
              gap: 16,
            }
          },
          Stat: { layout: { alignItems: "center" } },
        },
      },
      large: {
        layout: { padding: 32, maxWidth: 800 },
        parts: {
          Avatar: { layout: { width: 96, height: 96 } },
          Name: { look: { fontSize: 24 } },
        },
      },
    },
    verified: {
      parts: {
        Avatar: {
          look: {
            border: "3px solid #3b82f6",
          },
        },
      },
    },
    theme: {
      dark: {
        look: {
          background: "#1f2937",
        },
        parts: {
          Name: { look: { color: "#f9fafb" } },
          Handle: { look: { color: "#9ca3af" } },
          Bio: { look: { color: "#d1d5db" } },
          Stats: { look: { borderTop: "1px solid #374151" } },
          StatValue: { look: { color: "#f9fafb" } },
        },
      },
    },
  },

  render({ props, parts: { Root, Header, Avatar, Info, Name, Handle, Bio, Stats, Stat, StatValue, StatLabel } }) {
    return (
      <Root>
        <Header>
          <Avatar src={props.avatarUrl} alt={props.name} />
          <Info>
            <Name>
              {props.name}
              {props.verified && " ✓"}
            </Name>
            <Handle>@{props.username}</Handle>
          </Info>
        </Header>

        <Bio>{props.bio}</Bio>

        <Stats>
          <Stat>
            <StatValue>{props.followers?.toLocaleString() || 0}</StatValue>
            <StatLabel>Followers</StatLabel>
          </Stat>
          <Stat>
            <StatValue>{props.following?.toLocaleString() || 0}</StatValue>
            <StatLabel>Following</StatLabel>
          </Stat>
          <Stat>
            <StatValue>{props.posts?.toLocaleString() || 0}</StatValue>
            <StatLabel>Posts</StatLabel>
          </Stat>
        </Stats>
      </Root>
    )
  },
})

// Export the full example page
export const ProfileExamplesPage = () => (
  <Layout title="Forge Profile Examples">
    <ExampleSection title="Default Profile">
      <UserProfile
        name="Sarah Chen"
        username="sarahc"
        avatarUrl="https://i.pravatar.cc/150?img=5"
        bio="Designer & developer. Building beautiful interfaces. Based in SF."
        followers={1234}
        following={567}
        posts={89}
      />
    </ExampleSection>

    <ExampleSection title="Compact Variant">
      <UserProfile
        size="compact"
        name="Alex Rivera"
        username="arivera"
        avatarUrl="https://i.pravatar.cc/150?img=12"
        bio="Creative director. Coffee enthusiast."
        followers={456}
        following={234}
        posts={45}
      />
    </ExampleSection>

    <ExampleSection title="Skinny Variant">
      <UserProfile
        size="skinny"
        name="Taylor Kim"
        username="tkim"
        avatarUrl="https://i.pravatar.cc/150?img=3"
        bio="Minimalist designer."
        followers={2890}
        following={125}
        posts={312}
      />
    </ExampleSection>

    <ExampleSection title="Verified User (Dark Theme)">
      <UserProfile
        verified={true}
        theme="dark"
        name="Jordan Smith"
        username="jordansmith"
        avatarUrl="https://i.pravatar.cc/150?img=8"
        bio="Tech entrepreneur. Angel investor. Sharing insights on startups and innovation."
        followers={52300}
        following={892}
        posts={1240}
      />
    </ExampleSection>

    <ExampleSection title="Large Verified Profile">
      <UserProfile
        size="large"
        verified={true}
        name="Morgan Taylor"
        username="mtaylor"
        avatarUrl="https://i.pravatar.cc/150?img=20"
        bio="Product designer with 10 years of experience. Passionate about accessibility and inclusive design. Speaker at design conferences."
        followers={8900}
        following={234}
        posts={567}
      />
    </ExampleSection>
  </Layout>
)