"use client";

import React from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { UserPlus, Mail, Copy, Check } from "lucide-react";
import { useState } from "react";

export default function AdminInvitePage() {
  const [inviteData, setInviteData] = useState({
    email: "",
    username: "",
    role: "",
    message: ""
  });
  const [inviteLink, setInviteLink] = useState("");
  const [copied, setCopied] = useState(false);

  const handleInvite = () => {
    // Generate invite link (mock implementation)
    const link = `https://ember-market.com/invite/${Math.random().toString(36).substr(2, 9)}`;
    setInviteLink(link);
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(inviteLink);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Invite Vendor</h1>
        <p className="text-sm text-muted-foreground mt-1">Send invitations to new vendors to join the platform</p>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        {/* Invite Form */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <UserPlus className="h-5 w-5 mr-2" />
              Send Invitation
            </CardTitle>
            <CardDescription>
              Fill out the details to send an invitation to a new vendor
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email Address</Label>
              <Input
                id="email"
                type="email"
                placeholder="vendor@example.com"
                value={inviteData.email}
                onChange={(e) => setInviteData({...inviteData, email: e.target.value})}
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="username">Username</Label>
              <Input
                id="username"
                placeholder="vendor_username"
                value={inviteData.username}
                onChange={(e) => setInviteData({...inviteData, username: e.target.value})}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="role">Role</Label>
              <Select value={inviteData.role} onValueChange={(value) => setInviteData({...inviteData, role: value})}>
                <SelectTrigger>
                  <SelectValue placeholder="Select vendor role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="standard">Standard Vendor</SelectItem>
                  <SelectItem value="premium">Premium Vendor</SelectItem>
                  <SelectItem value="enterprise">Enterprise Vendor</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="message">Personal Message (Optional)</Label>
              <Textarea
                id="message"
                placeholder="Add a personal message to the invitation..."
                value={inviteData.message}
                onChange={(e) => setInviteData({...inviteData, message: e.target.value})}
              />
            </div>

            <Button onClick={handleInvite} className="w-full">
              <Mail className="h-4 w-4 mr-2" />
              Send Invitation
            </Button>
          </CardContent>
        </Card>

        {/* Invite Link */}
        {inviteLink && (
          <Card>
            <CardHeader>
              <CardTitle>Invitation Link</CardTitle>
              <CardDescription>
                Share this link with the vendor to complete their registration
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="p-3 bg-muted rounded-md">
                <code className="text-sm break-all">{inviteLink}</code>
              </div>
              <Button 
                onClick={copyToClipboard} 
                variant="outline" 
                className="w-full"
              >
                {copied ? (
                  <>
                    <Check className="h-4 w-4 mr-2" />
                    Copied!
                  </>
                ) : (
                  <>
                    <Copy className="h-4 w-4 mr-2" />
                    Copy Link
                  </>
                )}
              </Button>
            </CardContent>
          </Card>
        )}

        {/* Recent Invitations */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Recent Invitations</CardTitle>
            <CardDescription>Track the status of sent invitations</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <Mail className="h-5 w-5 text-blue-600" />
                  </div>
                  <div>
                    <p className="font-medium">john.doe@example.com</p>
                    <p className="text-sm text-muted-foreground">Sent 2 hours ago</p>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant="outline">Pending</Badge>
                  <Button variant="outline" size="sm">Resend</Button>
                </div>
              </div>

              <div className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                    <UserPlus className="h-5 w-5 text-green-600" />
                  </div>
                  <div>
                    <p className="font-medium">jane.smith@example.com</p>
                    <p className="text-sm text-muted-foreground">Accepted 1 day ago</p>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant="default" className="bg-green-500">Accepted</Badge>
                </div>
              </div>

              <div className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                    <Mail className="h-5 w-5 text-red-600" />
                  </div>
                  <div>
                    <p className="font-medium">bob.wilson@example.com</p>
                    <p className="text-sm text-muted-foreground">Expired 3 days ago</p>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant="destructive">Expired</Badge>
                  <Button variant="outline" size="sm">Resend</Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}