import { useState } from 'react';
import { Briefcase, Code2, Package, Send } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

const CHANNELS = [
  { icon: Code2, label: 'github', href: 'https://github.com/javidselimov' },
  { icon: Briefcase, label: 'linkedin', href: 'https://www.linkedin.com/in/javidsalim/' },
  { icon: Package, label: 'npm', href: 'https://www.npmjs.com/~ubuligan' },
];

export default function Contact() {
  const [sending, setSending] = useState(false);

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSending(true);
    toast.loading('Encrypting transmission...', { id: 'tx' });
    window.setTimeout(() => {
      setSending(false);
      toast.success('Message routed through the construct.', {
        id: 'tx',
        description: 'Javid will decode it shortly.',
      });
    }, 1200);
  };

  return (
    <section className="grid gap-8 lg:grid-cols-[1fr_0.8fr]">
      <Card className="rise box-glow border-primary/20 bg-card/60 backdrop-blur-sm">
        <CardHeader>
          <CardTitle className="font-display text-2xl text-primary text-glow">
            ./contact --secure
          </CardTitle>
          <CardDescription className="font-mono">
            Open an encrypted channel to the operator.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={onSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name" className="font-mono text-xs text-primary/80">
                ALIAS
              </Label>
              <Input id="name" required placeholder="neo" className="font-mono" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email" className="font-mono text-xs text-primary/80">
                NODE_ADDRESS
              </Label>
              <Input
                id="email"
                type="email"
                required
                placeholder="you@zion.io"
                className="font-mono"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="msg" className="font-mono text-xs text-primary/80">
                PAYLOAD
              </Label>
              <Textarea
                id="msg"
                required
                rows={4}
                placeholder="Knock, knock..."
                className="font-mono"
              />
            </div>
            <Button type="submit" disabled={sending} className="box-glow w-full font-mono">
              <Send className="size-4" />
              {sending ? 'TRANSMITTING...' : 'TRANSMIT'}
            </Button>
          </form>
        </CardContent>
      </Card>

      <div className="rise space-y-3" style={{ animationDelay: '120ms' }}>
        <p className="font-mono text-xs tracking-widest text-muted-foreground">
          // DIRECT CHANNELS
        </p>
        {CHANNELS.map((c) => (
          <a
            key={c.label}
            href={c.href}
            target="_blank"
            rel="noreferrer"
            className="group flex items-center gap-3 rounded-md border border-primary/20 bg-card/50 px-4 py-3 font-mono text-sm text-muted-foreground transition-colors hover:border-primary/60 hover:text-primary hover:text-glow"
          >
            <c.icon className="size-4 text-primary" />
            <span className="flex-1">{c.label}</span>
            <span className="text-primary opacity-0 transition-opacity group-hover:opacity-100">
              ↗
            </span>
          </a>
        ))}
      </div>
    </section>
  );
}