import {
	Button,
	DescriptionList,
	DescriptionListDetails,
	DescriptionListTerm,
	FormattedDateTime,
	Page,
	PageBody,
	PageBodyContent,
	PageHeader,
	PageHeaderActions,
	PageHeaderIconTile,
	PageHeaderLabel,
	PageHeaderTabs,
	PageHeaderTitle,
	PageRail,
	PageSection,
	Panel,
	PanelHeader,
	PanelSection,
	PanelTitle,
	TabNav,
	Timeline,
	TimelineItem,
} from '@customerio/pluma-components/react';

// Sibling routes of the person's page, so each href resolves against the
// current URL
const personTabs = [
	{ href: 'overview', text: 'Overview', isActive: true },
	{ href: 'activity', text: 'Activity' },
	{ href: 'messages', text: 'Messages' },
	{ href: 'segments', text: 'Segments' },
];

export interface ObjectDetailProps {
	/** Called when the edit attributes action is activated. */
	onEditAttributes: () => void;
	/** Called when the delete action is activated. */
	onDelete: () => void;
}

export function ObjectDetail({ onEditAttributes, onDelete }: ObjectDetailProps) {
	return (
		<Page isFullScreen>
			<PageHeader>
				<PageHeaderIconTile name="person" />
				<PageHeaderTitle>Jordan Hayes</PageHeaderTitle>
				<PageHeaderLabel color="success" showStatusIndicator={true}>
					Subscribed
				</PageHeaderLabel>
				<PageHeaderActions>
					<Button variant="secondary" isCritical={true} onClick={onDelete}>
						Delete person
					</Button>
					<Button variant="primary" onClick={onEditAttributes}>
						Edit attributes
					</Button>
				</PageHeaderActions>
				<PageHeaderTabs>
					<TabNav tabs={personTabs} />
				</PageHeaderTabs>
			</PageHeader>
			<PageBody>
				<PageBodyContent>
					<PageSection>
						<Panel>
							<PanelHeader>
								<PanelTitle>Recent activity</PanelTitle>
							</PanelHeader>
							<PanelSection>
								<Timeline>
									<TimelineItem
										color="violet"
										markerIcon="segment"
										title="Entered segment"
										description="Growth plan customers"
										meta={<FormattedDateTime date="2026-10-08T15:06:00Z" format="medium" />}
									/>
									<TimelineItem
										markerIcon="edit"
										title="Updated attribute"
										description="Changed plan from trial to growth"
										meta={<FormattedDateTime date="2026-10-08T15:05:00Z" format="medium" />}
									/>
									<TimelineItem
										color="green"
										markerIcon="view-on"
										title="Opened email"
										description="Your trial ends in 3 days"
										meta={<FormattedDateTime date="2026-10-06T08:12:00Z" format="medium" />}
									/>
									<TimelineItem
										color="blue"
										markerIcon="email"
										title="Sent email"
										description="Your trial ends in 3 days"
										meta={<FormattedDateTime date="2026-10-05T14:00:00Z" format="medium" />}
									/>
								</Timeline>
							</PanelSection>
						</Panel>
					</PageSection>
				</PageBodyContent>
				<PageRail>
					<Panel>
						<PanelHeader>
							<PanelTitle>Attributes</PanelTitle>
						</PanelHeader>
						<PanelSection>
							<DescriptionList>
								<DescriptionListTerm>Email</DescriptionListTerm>
								<DescriptionListDetails>jordan.hayes@example.com</DescriptionListDetails>

								<DescriptionListTerm>ID</DescriptionListTerm>
								<DescriptionListDetails>48213</DescriptionListDetails>

								<DescriptionListTerm>Created</DescriptionListTerm>
								<DescriptionListDetails>
									<FormattedDateTime date="2025-03-14T14:31:00Z" format="medium" />
								</DescriptionListDetails>

								<DescriptionListTerm>Last seen</DescriptionListTerm>
								<DescriptionListDetails>
									<FormattedDateTime date="2026-10-08T15:12:00Z" />
								</DescriptionListDetails>

								<DescriptionListTerm>Timezone</DescriptionListTerm>
								<DescriptionListDetails>Europe/Stockholm</DescriptionListDetails>

								<DescriptionListTerm>Plan</DescriptionListTerm>
								<DescriptionListDetails>Growth</DescriptionListDetails>
							</DescriptionList>
						</PanelSection>
					</Panel>
				</PageRail>
			</PageBody>
		</Page>
	);
}

pluma-cli scaffold object-detail <dest-dir> --framework react