import type { ReactNode } from "react";
import {
    AlertTriangle,
    Bell01,
    Calendar,
    CheckCircle,
    Copy01,
    Edit01,
    FaceSmile,
    FilterLines,
    Link01,
    Mail01,
    MarkerPin01,
    MessageChatCircle,
    Paperclip,
    Plus,
    RefreshCcw02,
    Send01,
    Share07,
    Stars02,
    ThumbsDown,
    ThumbsUp,
    Trash01,
    UserPlus01,
    VideoRecorder,
} from "@properui/icons";
import { FileUpload } from "@/components/application/file-upload/file-upload-base";
import { Notification } from "@/components/application/notifications/notifications";
import { Avatar } from "@/components/base/avatar/avatar";
import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group";
import { Badge } from "@/components/base/badges/badges";
import { Button } from "@/components/base/buttons/button";
import { ButtonUtility } from "@/components/base/buttons/button-utility";
import { Checkbox } from "@/components/base/checkbox/checkbox";
import { Dropdown } from "@/components/base/dropdown/dropdown";
import { Input } from "@/components/base/input/input";
import { DemoNativeSelect } from "@/components/base/input/input-native-select";
import { PaymentInput } from "@/components/base/input/input-payment";
import { RadioButton, RadioGroup } from "@/components/base/radio-buttons/radio-buttons";
import { TextArea } from "@/components/base/textarea/textarea";
import { Toggle } from "@/components/base/toggle/toggle";
import { Dot } from "@/components/foundations/dot-icon";
import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";
import { MastercardIcon, VisaIcon } from "@/components/foundations/payment-icons";
import { AVATARS, IMAGES, LOGOS, avatar } from "@/utils/demo-assets";
import { SlideoutMenu } from "./slideout-menu";

export const AIAssistantMessageMenu = () => (
    <TriggerFrame label="View AI response">
        {(close) => (
            <>
                <SlideoutMenu.Header onClose={close}>
                    <DrawerTitle title="AI response" />
                </SlideoutMenu.Header>
                <SlideoutMenu.Content>
                    <div className="flex items-start gap-3">
                        <FeaturedIcon icon={Stars02} color="brand" theme="gradient" size="sm" />
                        <div className="bg-secondary text-secondary flex-1 rounded-2xl rounded-ss-sm px-4 py-3 text-sm">
                            Here's a summary of the thread: the team agreed to ship the redesign on the 12th, pending final review from design and QA. Two open
                            questions remain about the onboarding flow.
                        </div>
                    </div>
                    <div className="flex items-center gap-1 ps-11">
                        <ButtonUtility tooltip="Copy" size="sm" color="tertiary" icon={Copy01} />
                        <ButtonUtility tooltip="Regenerate" size="sm" color="tertiary" icon={RefreshCcw02} />
                        <ButtonUtility tooltip="Good response" size="sm" color="tertiary" icon={ThumbsUp} />
                        <ButtonUtility tooltip="Bad response" size="sm" color="tertiary" icon={ThumbsDown} />
                    </div>
                </SlideoutMenu.Content>
                <SlideoutMenu.Footer className="flex items-center gap-2">
                    <Input aria-label="Ask a follow-up" placeholder="Ask a follow-up..." size="md" wrapperClassName="flex-1" />
                    <Button size="md" iconLeading={Send01} onClick={close}>
                        Send
                    </Button>
                </SlideoutMenu.Footer>
            </>
        )}
    </TriggerFrame>
);

/* -------------------------------------------------------------------------------------------------
 * 24. Share project menu
 * ---------------------------------------------------------------------------------------------- */

const roleOptions = [
    { label: "Can view", value: "view" },
    { label: "Can edit", value: "edit" },
];

const sharedWith = [
    { ...avatar(0), role: "Owner" },
    { ...avatar(3), role: "Can edit" },
    { ...avatar(4), role: "Can view" },
];

export const ShareProjectMenu = () => (
    <TriggerFrame label="Share project">
        {(close) => (
            <>
                <SlideoutMenu.Header onClose={close}>
                    <DrawerTitle title="Share project" />
                </SlideoutMenu.Header>
                <SlideoutMenu.Content>
                    <div className="flex w-full items-center gap-2">
                        <Input aria-label="Add people by email" placeholder="Add people by email" icon={Mail01} size="md" wrapperClassName="flex-1" />
                        <DemoNativeSelect aria-label="Permission" options={roleOptions} defaultValue="view" size="md" className="w-32" />
                        <Button size="md">Invite</Button>
                    </div>

                    <ul className="flex w-full flex-col gap-4">
                        {sharedWith.map((person) => (
                            <li key={person.username} className="flex items-center justify-between gap-3">
                                <AvatarLabelGroup size="sm" src={person.src} alt={person.alt} title={person.name} subtitle={person.email} />
                                <Badge size="sm" color={person.role === "Owner" ? "brand" : "gray"}>
                                    {person.role}
                                </Badge>
                            </li>
                        ))}
                    </ul>

                    <div className="border-secondary flex w-full items-start justify-between gap-4 border-t pt-4">
                        <div className="flex items-start gap-2">
                            <Share07 aria-hidden="true" className="text-fg-quaternary mt-0.5 size-5 shrink-0" />
                            <div>
                                <p className="text-secondary text-sm font-medium">Anyone with the link</p>
                                <p className="text-tertiary mt-0.5 text-sm">Anyone with the link can view this project.</p>
                            </div>
                        </div>
                        <Toggle aria-label="Anyone with the link can view" />
                    </div>

                    <div className="flex w-full items-center gap-2">
                        <Input
                            aria-label="Shareable link"
                            value="https://proper.example.com/p/website-redesign"
                            isReadOnly
                            size="md"
                            wrapperClassName="flex-1"
                        />
                        <ButtonUtility tooltip="Copy link" size="sm" color="secondary" icon={Link01} />
                    </div>
                </SlideoutMenu.Content>
                <SlideoutMenu.Footer className="flex items-center justify-end">
                    <Button size="md" onClick={close}>
                        Done
                    </Button>
                </SlideoutMenu.Footer>
            </>
        )}
    </TriggerFrame>
);

/* -------------------------------------------------------------------------------------------------
 * 25. Create event menu
 * ---------------------------------------------------------------------------------------------- */

export const CreateEventMenu = () => (
    <TriggerFrame label="Create event">
        {(close) => (
            <>
                <SlideoutMenu.Header onClose={close}>
                    <DrawerTitle title="Create event" />
                </SlideoutMenu.Header>
                <SlideoutMenu.Content>
                    <Input label="Event title" placeholder="Design team sync" size="md" />
                    <div className="grid w-full grid-cols-3 gap-4">
                        <Input label="Date" type="date" size="md" className="col-span-3 md:col-span-1" />
                        <Input label="Start time" type="time" size="md" />
                        <Input label="End time" type="time" size="md" />
                    </div>
                    <Input label="Location" placeholder="Conference room 2B" icon={MarkerPin01} size="md" />
                    <Input label="Invite guests" placeholder="Add guests by email" icon={UserPlus01} size="md" />
                    <TextArea label="Description" placeholder="Add a description or agenda..." rows={3} />
                </SlideoutMenu.Content>
                <SlideoutMenu.Footer className="flex items-center justify-end gap-3">
                    <Button color="secondary" size="md" onClick={close}>
                        Cancel
                    </Button>
                    <Button size="md" onClick={close}>
                        Create event
                    </Button>
                </SlideoutMenu.Footer>
            </>
        )}
    </TriggerFrame>
);

/* -------------------------------------------------------------------------------------------------
 * 26. Integration menu
 * ---------------------------------------------------------------------------------------------- */

export const IntegrationMenu = () => {
    const integration = LOGOS[3];
    const account = AVATARS[0];

    return (
        <TriggerFrame label="Manage integration" color="secondary">
            {(close) => (
                <>
                    <SlideoutMenu.Header onClose={close}>
                        <div className="flex items-center gap-3">
                            <div className="bg-secondary ring-secondary_alt flex size-10 shrink-0 items-center justify-center rounded-lg ring-1">
                                <img src={integration.src} alt="" className="size-6" />
                            </div>
                            <DrawerTitle title={`${integration.name} integration`} />
                        </div>
                    </SlideoutMenu.Header>
                    <SlideoutMenu.Content>
                        <p className="text-secondary text-sm">Automatically sync records between this workspace and {integration.name} in both directions.</p>

                        <div className="border-secondary flex w-full items-center justify-between border-t pt-4">
                            <p className="text-secondary text-sm font-medium">Enable integration</p>
                            <Toggle aria-label="Enable integration" defaultSelected />
                        </div>

                        <fieldset className="border-secondary flex w-full flex-col gap-3 border-t pt-4">
                            <legend className="text-primary text-sm font-semibold">Permissions</legend>
                            <Checkbox label="Read records" defaultSelected />
                            <Checkbox label="Write records" defaultSelected />
                            <Checkbox label="Manage settings" />
                        </fieldset>

                        <div className="border-secondary flex w-full items-center justify-between gap-3 border-t pt-4">
                            <AvatarLabelGroup size="sm" src={account.src} alt={account.alt} title={`Connected as ${account.name}`} subtitle={account.email} />
                            <Button color="link-destructive" size="sm">
                                Disconnect
                            </Button>
                        </div>
                    </SlideoutMenu.Content>
                    <SlideoutMenu.Footer className="flex items-center justify-end gap-3">
                        <Button color="secondary" size="md" onClick={close}>
                            Cancel
                        </Button>
                        <Button size="md" onClick={close}>
                            Save
                        </Button>
                    </SlideoutMenu.Footer>
                </>
            )}
        </TriggerFrame>
    );
};
Drawer components
