import type { Meta, StoryObj } from '@storybook/react'
import React from 'react'
import { Button } from './Button'
import { Avatar } from './Avatar'
import { DropdownMenu } from './DropdownMenu'
import { IntegrationStatusCard } from './IntegrationStatusCard'
import { UserMenu } from './UserMenu'

const meta: Meta = {
  title: 'Components/Account',
  parameters: { layout: 'centered' },
}
export default meta

export const AvatarStory: StoryObj = {
  name: 'Avatar',
  render: () => (
    <div className="flex items-center gap-4">
      <Avatar name="홍길동" email="hong@example.com" size="xs" />
      <Avatar name="홍길동" email="hong@example.com" size="sm" status="online" />
      <Avatar name="Jane Doe" email="jane@example.com" size="md" status="warning" />
      <Avatar email="ops@example.com" size="lg" status="offline" />
    </div>
  ),
}

export const DropdownMenuStory: StoryObj = {
  name: 'DropdownMenu',
  render: () => (
    <DropdownMenu
      trigger={
        <Button variant="ghost" size="sm" rightIcon="expand_more">
          계정
        </Button>
      }
      align="end"
      width="md"
    >
      <DropdownMenu.Label>계정</DropdownMenu.Label>
      <DropdownMenu.Item leftIcon="person" description="hong@example.com">
        홍길동
      </DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item leftIcon="settings">계정 설정</DropdownMenu.Item>
      <DropdownMenu.Item leftIcon="logout" tone="danger">
        로그아웃
      </DropdownMenu.Item>
    </DropdownMenu>
  ),
}

export const UserMenuStory: StoryObj = {
  name: 'UserMenu',
  render: () => (
    <div className="w-64 rounded-[14px] border border-slate-100 bg-slate-50 p-3">
      <UserMenu
        user={{
          name: '홍길동',
          email: 'hong.gildong@example-company.com',
        }}
        integrations={[
          { label: 'Sheets', status: 'connected', helperText: '2분 전 동기화' },
          { label: 'Slack', status: 'warning', helperText: '권한 확인 필요' },
        ]}
        onSettingsClick={() => {}}
        onLogout={() => {}}
      />
    </div>
  ),
}

export const IntegrationStatusCardStory: StoryObj = {
  name: 'IntegrationStatusCard',
  render: () => (
    <div className="grid w-[720px] grid-cols-2 gap-4">
      <IntegrationStatusCard
        icon="table_chart"
        title="Sheets"
        status="connected"
        description="hong@example.com 계정으로 연결됨"
        metadata="마지막 동기화 2분 전"
        primaryAction={{ label: '다시 연결', onClick: () => {} }}
        secondaryAction={{ label: '연결 해제', onClick: () => {}, tone: 'danger' }}
      />
      <IntegrationStatusCard
        icon="chat"
        title="Slack"
        status="warning"
        description="권한 확인 후 다시 연결이 필요합니다"
        primaryAction={{ label: '연결 확인', onClick: () => {} }}
      />
    </div>
  ),
}