import LLMLabel from '@/components/llm-select/llm-label';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useFetchAllAddedModels } from '@/hooks/use-llm-request';
import { cn } from '@/lib/utils';
import { parseModelValue } from '@/utils/llm-util';
import { PropsWithChildren, useMemo } from 'react';
import { useOwnerTenantId } from '../../context';

export function CardWithForm() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="name">Name</Label>
              <Input id="name" placeholder="Name of your project" />
            </div>
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="framework">Framework</Label>
              <Select>
                <SelectTrigger id="framework">
                  <SelectValue placeholder="Select" />
                </SelectTrigger>
                <SelectContent position="popper">
                  <SelectItem value="next">Next.js</SelectItem>
                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
                  <SelectItem value="astro">Astro</SelectItem>
                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  );
}

type LabelCardProps = {
  className?: string;
} & PropsWithChildren &
  React.HTMLAttributes<HTMLElement>;

export function LabelCard({ children, className, ...props }: LabelCardProps) {
  return (
    <div
      className={cn(
        'bg-bg-card rounded-sm p-1 text-text-secondary text-xs',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export function LLMLabelCard({ llmId }: { llmId?: string }) {
  const ownerTenantId = useOwnerTenantId();
  const { data: allAddedModels } = useFetchAllAddedModels(
    undefined,
    ownerTenantId,
  );

  const isValidLlm = useMemo(() => {
    if (!llmId) return false;

    const parsed = parseModelValue(llmId);
    if (parsed) {
      return allAddedModels.some(
        (m) =>
          m.name === parsed.model_name &&
          m.instance_name === parsed.model_instance &&
          m.provider_name === parsed.model_provider,
      );
    }

    // value is a plain model_id rather than the composite string
    return allAddedModels.some((m) => m.model_id === llmId);
  }, [allAddedModels, llmId]);

  return (
    <LabelCard
      className={isValidLlm ? '' : 'bg-state-error-5 border-state-error border'}
    >
      <LLMLabel value={llmId} ownerTenantId={ownerTenantId}></LLMLabel>
    </LabelCard>
  );
}
